自学前端day 9

相对定位后，元素重叠的情况

实例：

 



            
NO.1
            
NO.2
            
NO.3
            
NO.4
        

解释

对于定位元素，z-index 最高的数显 示在最上面，不管该元素 在 HTML 中出现的次序。 第一条规则为所有四个 div 设置了 position: absolute;，而定义 .NO3 时又覆盖了这一规则， 让 .NO3回到默认的 static。因此，尽管它的 z-index 值最高，但这没有任何效果，它总是位于 最底层。

z-index 的值越大，元素在堆中就越 高。

定位的盒子按照 z-index 由高到低的 次序进行叠放。第三个盒子位于最底层，因为它处 于常规的文档流。

注意：

z-index 属性仅对定位过的元素（即 设为绝对定位、相对定位或固定定位的元 素）有效。若仅包含绝对定位的元 素，但实际上可以对绝对定位、相对定位和 固定定位的元素混合使用 z-index，z-index 会将它们作为整体进行安排，而不是分别 安排。

有坑勿踏

自己走过的坑：设了Z-index，但是没有效果！调整了很久发现是父标签的问题。父标签 position属性为relative，改为position:absolute后就解决了！