使用CSS堆疊元素

Question

是否有一個屬性允許div中的一個元素堆疊在同一個div中的另一個元素上？

我知道兩個div可以使用position: relative; & position: absolute;得到這個工作，但有兩個元素在同一個div我不知道該怎麼做。

Answer 1

如果你想「堆棧」元素在彼此之上，是的，你可以使用position屬性。

您可以使用z-index更改堆棧順序;具有較高z-index的元素將在具有較低z-index的元素的正面中。

你可以在這裏看到這個，在這個fiddle。

.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; 
 
}

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