具有更大堆栈的 z-index 不在元素前面？答案

【问题标题】：z-index with greater stack is not in front of the element?具有更大堆栈的 z-index 不在元素前面？
【发布时间】：2017-04-03 22:47:14
【问题描述】：

我目前的困惑是，即使我为我的 div 标签设置了更大的 z-index 值，在处理了一些 CSS 之后它不再位于顶部。

代码使用如下：

$('.lights').on('click',function(){
  $('<div id="lightsOut"></div>').appendTo('body');
  
  $('#lightsOut').css( { 
  	opacity: 0, 
    width: $(document).width(), 
    height: $(document).height() 
  } )
    .addClass('lightsOut')
    .animate({opacity: 1}, 400);
    
  $('#media').css( { "z-index": "10000" } );
});

.lightsOut {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 0px;
  height: 0px;
  background-color: #000;
  z-index: 9999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h4>Title</h4>
<div id="media">
  <button class="lights">Lights Out</button>
  <h4 style="color: grey">Another Title</h4>
</div>
</body>

单击“div media”-元素时，我想将背景更改为黑色，同时仍显示“div media”-元素。我怎样才能实现这种行为？

【问题讨论】：

z-index not working with position absolute的可能重复

标签： jquery css

【解决方案1】：

应用一个相对位置

$('#media').css( { "position": "relative" } );

下面的片段

$('.lights').on('click',function(){
  $('<div id="lightsOut"></div>').appendTo('body');
  
  $('#lightsOut').css( { 
  	opacity: 0, 
    width: $(document).width(), 
    height: $(document).height() 
  } )
    .addClass('lightsOut')
    .animate({opacity: 1}, 400);
    
  $('#media').css( { "z-index": "10000" } );
    $('#media').css( { "position": "relative" } );
});

.lightsOut {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 0px;
  height: 0px;
  background-color: #000;
  z-index: 9999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h4>Title</h4>
<div id="media">
  <button class="lights">Lights Out</button>
  <h4 style="color: grey">Another Title</h4>
</div>
</body>

【讨论】：