用CSS堆叠元素

Question

是否有一个属性允许div中的一个元素堆叠在同一div中的另一个元素上？

我知道有两个div你可以使用position: relative;＆amp; position: absolute;让这个工作，但在同一个div中有两个元素，我不知道该怎么做。

Answer 1

如果您希望将＆＃34;堆叠＆＃34; 元素叠加在一起，是的，您可以使用position属性。

您可以使用z-index来更改堆栈顺序;具有较高z-index的元素将位于具有较低z-index的元素的前中。

您可以在此fiddle中看到此内容。

＆＃13;

＆＃13;

.el1 {
    height: 100px;
    width: 100px;
    background: yellow;
    position: relative;
    z-index: 1;
}

.el2, .el3 {
    height: 50px;
    width: 50px;
    position: absolute;
    top: 0;
    left: 0;
    background: blue;
    z-index: 2;
}

.el3 {
    background: green;
    z-index: 3;
    top: 5px;
    left: 5px;
}

＆＃13;

<div class="el1">
    <div class="el2">el2</div>
    <div class="el3">el3</div>
</div>

＆＃13;

＆＃13;

＆＃13;