自学前端day 9

时间 2021-07-14 标签 Z-index 元素重叠相对定位

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

实例：

<style>
            div{
                border: 1px rgb(199, 199, 209) solid;
                height: 125px;
                position: absolute;
                width:200px;
                text-align: center;
            }
            .b1{
                background:pink;
                left: 100px;
                top:50px;
                z-index:100;
            }
            .b2{
                background:blanchedalmond;
                left: 0;
                top:130px;
                z-index:500;
            }

            .b3{
                background: blue;
                position: static;
                z-index:1000;
            }
            .b4{
                background:yellow;
                left:285px;
                top:65px;
                z-index:3'
            }
        </style>


<body>
            <div class="b1"><p>NO.1</p></div>
            <div class="b2"><p>NO.2</p></div>
            <div class="b3"><p>NO.3</p></div>
            <div class="b4"><p>NO.4</p></div>
        </body>

解释

对于定位元素，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后就解决了！