css定位的相关知识,css定位知识点

html {

height:100%;

}

body {

/* 设置body高度与 html 高度相等，以便实现垂直居中 */

height:100%;

/* 开启弹性布局 */

display:flex;

/* 水平居中 */

justify-content:center;

/* 垂直居中 */

align-items:center;

/* 消除body自带边距,消除滚动条 */

margin:0 auto;

}

div {

/* 针对上级父元素body所开启的弹性布局,相对居中 */

width:500px;

height:500px;

/* 设置相对定位,为子元素 section 提供定位 */

position:relative;

background:#ccc;

transform:scale(0.7);

}

section {

width:100px;

height:100px;

background:white;

/* 设置绝对定位,针对父元素 div进行定位 */

position:absolute;

/* 设置渐变返回时间为0.5s */

transition-duration:0.5s;

/* 文本居中 */

text-align:center;

line-height:100px;

/* 透明度为0.7 */

opacity:0.7;

}

section:nth-child(1) {

/* 左上对齐 */

left:0;

top:0;

/* 盒子阴影效果 */

/* box-shadow： 水平偏移方向 垂直偏移方向 阴影散发范围 阴影颜色 */

box-shadow:-3px -3px 2px rgb(94,92,92);

}

section:nth-child(2) {

/* 右上对齐 */

/* right:0;

*/

/* 针对下面发生的鼠标经过，必须与其的 left值对应，所以在这里用right不行 */

left:400px;

top:0;

box-shadow:3px -3px 2px rgb(94,92,92);

}

section:nth-child(3) {

/* 左下对齐 */

left:0;

/* 针对下面发生的鼠标经过，必须与其的 top值对应，所以在这里用bottom不行 */

/* bottom:0;

*/

top:400px;

box-shadow:-3px 3px 2px rgb(94,92,92);

}

section:nth-child(4) {

/* 右下对齐 */

left:400px;

/* bottom:0;

*/

top:400px;

box-shadow:3px 3px 2px rgb(94,92,92);

}

section:nth-child(5) {

/* 居中对齐 */

left:200px;

top:200px;

}

/* 鼠标经过 */

/* 当鼠标经过 div 时 div内的 section 发生改变 */

div:hover section {

/* 设置渐变时间为2s */

transition:2s;

/* 居中 */

/* left:500px/2 - 100px/2 =200px */

left:200px;

/* 此处针对上面的 top left */

/* 若换成bottom right 不能实现该效果 */

top:200px;

background:yellow;

}

/* 当鼠标经过 div 时 div内的 第五个section 发生改变 */

div:hover section:nth-child(5) {

/* 渐变延迟 */

transition-delay:2s;

/* 变大 */

transform:scale(1.5);

/* 透明度为1，背景色为父元素背景色，实现遮盖效果 */

background:#ccc;

opacity:1;

}