Z-index不起作用

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那样），但是，无论我增加多少{{1}在z-index中，该按钮不会覆盖#button。

Answer 1

这是因为#popup的 z-index 小于#gray而#button是#popup的孩子，所以它总是落后{ {1}}，但您可以将#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;
}