z-index沒有正確建立索引

好的，所以這段代碼在div中產生了兩個塊。頂部塊應該越過底部塊，因爲頂部具有更高的Z-索引，但是當我給底部塊留出頂部：-30px時，它會在頂部塊之上。z-index沒有正確建立索引

<html> 
<head></head> 
<body> 
    <div style="width: 300px; height: 90px; overflow: hidden;"> 
     <div style="width:300px; height: 50px; z-index: 2; background-color: #ff0000;"> 
     </div> 

     <div style="width:300px; height: 50px; z-index: 1; background-color: #ff00ff; margin-top: -30px;"> 
     </div> 
    </div> 
</body> 
</html>

我該如何獲得頂部塊去底部塊？

來源

2014-10-05 CyanPrime

（希望這只是用於演示目的，但）你應該避免使用內嵌樣式...這是非常困難的工作，與和維護。 – 2014-10-05 19:56:32

該z-index財產only applies to positioned elements。

您可以添加position: relative，它將按預期工作(example)。

position屬性的默認值是static，這就是爲什麼它不起作用。

來源

2014-10-05 19:55:32

謝謝你的工作！我會盡快接受。 – CyanPrime 2014-10-05 20:01:59

在這兩個區塊的CSS添加position:relative;：

<div style="width: 300px; height: 90px; overflow: hide;"> 
     <div style="position: relative; width:300px; height: 50px; z-index: 2; background-color: #ff0000;"> 
     </div> 
     <div style="position: relative; width:300px; height: 50px; z-index: 1; background-color: #ff00ff; margin-top: -30px;"> 
     </div> 
    </div>

http://jsfiddle.net/uu721kgc/

來源

2014-10-05 19:59:37 MaximOrlovsky

z-index沒有正確建立索引

回答

相關問題