Z索引不起作用

Question

我在z-index属性方面遇到了一些问题。 在下面您可以看到一个示例：

<div id="popup">
  <div id="button">
  </div>
</div>

<div id="trip">
</div>

<div id="gray">
</div>

https://jsfiddle.net/cf5dhv39/1/

如您所见，我希望div #button覆盖div #gray （就像div #trip一样），但是，无论我增加#button的z-index #button ，按钮都不会覆盖#gray 。

Answer 1

这是因为#popup具有较小的z-index比#gray和#button是儿童#popup所以它总是会落后#gray ，但你可以把#gray内#popup

 div{ width: 100px; height: 100px; background: black; position: relative; } #popup{ z-index: 100; width: 300px; height: 300px; } #button{ top: 10px; left: 10px; z-index: 2; background: green; } #trip{ top: 40px; left: 10px; background: blue; z-index: 1000; } #gray{ width: 100%; height: 100%; position: fixed; background: gray; top: 0px; left: 0px; opacity: 0.5; z-index: 1; } 

 <div id="popup"> <div id="button"></div> <div id="gray"></div> </div> <div id="trip"></div>