71讲 固定定位固定定位与上一讲的绝对定位很相似,不同点是:固定定位永远是浏览器窗口左上角不会随着滚轴滚动,常用来做广告72讲 元素的层级相对定位没有脱离文档流,但是会灵魂出窍进行元素遮盖。绝对定位脱离了文档流,也能实现遮盖。另外float也会脱离文档流实现某种意义上的遮盖。当这三个遇到一块会出现什么情况?层级z-index只有设置了position才可以使用z-index(position:static除外)进行层级的设置,默认层级是0父元素的层级再高也不会盖住子元素<html><head><title>层级</title><meta charset=“utf-8” /></head><style> .father{ width:200px; height:200px; background:yellow; position: relative; z-index:999; } .son{ width:100px; height:100px; background:purple; position: absolute; z-index:1; } </style><body><div class=“father”> <div class=“son”></div></div></body></html>关于float层级div1绝对定位会脱离文档流position:absolute,那么此时我设置div2为float:left会出现什么效果呢?发现设置了position:absolute后也会把float进行遮盖,并不会出现两个元素水平排列<html><head><title>导航条</title><meta charset=“utf-8” /></head><style> *{ margin:0px; padding:0px; } .div1{ width:200px; height:200px; background:yellow; position: absolute; left:50px; } .div2{ width:300px; height:300px; background:purple; float:left; } </style><body><div class=“div1”></div><div class=“div2”></div></body></html>遮盖与总结如果要实现遮盖效果 position:absolute,应该是首先会想到的设置了position属性后会有专属的属性出现:left top bottom right z-index其他元素不可以使用~~!