定位:
一、组成:定位模式+边偏移
position:属性值;
static 静态定位,默认没有定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
边偏移:top buttom left right
top: 100px;
二、相对定位特点
1.相对于自己原来的位置来移动
2.不脱标,继续保留位置
三、绝对定位特点
1.如果祖先元素或父元素没有定位,则以浏览器为准
2.如果祖先元素或父元素有定位,则以最近的有定位的yaunsu7为准
3.脱标
四、子绝父相
子级–>绝对定位
父级–>相对定位,用来占位置
五、定位居中(绝对定位)
完全居中:
top:0;
right:0;
left:0;
buttom:0;
margin:auto;
左右居中:right: 0 ; left : 0 ; margin :auto ;
上下居中:top: 0 ; buttom :0 ; margin : auto ;
六、固定定位
1.不占=位置,一般用于导航栏吸顶效果,设置合适的版心宽度
2.必须要宽度,没设置宽度就以内容为准,内容为0就无法看到
3.与父级无关,以屏幕为准
七、定位叠放次序
z-index : 3 ;
// 没有单位,负数或正数,谁大显示谁
只能定位的盒子才能放z-index
数值相同,按照后来者居上
八、粘性定位(sticky)
九、实战(w3school)