如何恢复绝对定位的叠加元素顺序？

Question

我有以下标记：

.slider {
    position: relative;
    height: 100%;
    width: 100%;
}

.slider div {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

<div class="slider">
    <div class="div1">sample1</div>
    <div class="div2">sample2</div>
    <div class="div3">sample3</div>
    <div class="div4">sample4</div>
</div>

这段代码让.slider内容overlay从最后一个元素到第一个元素，所以最后一个显示的同时其他人超载了。

我想要的只是恢复实际的显示顺序。

Answer 1

您正在寻找的解决方案由 css z-index 属性提供。它指定 z 顺序，在元素重叠的情况下，将具有最高 z 索引值的元素显示为第一个。在这里查看文档 https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

如何恢复绝对定位的叠加元素顺序？

How to revert absolute positioned overlay element order?

html

css

overlay

css-position