设置opacity创建堆叠上下文后，为何无法实现预期黑色效果？

相关HTML代码 #

<div class="card-body" style="opacity:0.99;"> 
  <!-- stacking context’s root element -->
  <h5 style="padding-left:60px;position:relative;z-index:10;" class="card-title"><!-- stacking order: 1 -->
    <i style="position:absolute;font-size:60px;color:red;top:-10px;left:-10px;" class="fa fa-play-circle-o" aria-hidden="true"></i> Video Title 
  </h5>
  <div class="card-details-1 clearfix" style="position:relative;z-index:20;"><!-- stacking order: 2 -->
    <div>
      <span class="card-date float-left">19.02.17</span>
      <a class="card-username float-right" href="#">Username</a>
    </div>
  </div>
  <div class="card-details-2 clearfix">
    <div>
      <span class="card-duration float-left">7:56 min</span>
      <span class="card-votes float-right">20 Votes</span>
    </div>
  </div>
  <a class="card-btn" href="#">View Video</a>
</div>

已执行操作 #

• 为div.card-body设置了小于1的opacity值，以此创建新的堆叠上下文（stacking context）。
• 为h5和div.card-details-1设置了定位属性与z-index值。

疑问 #

为何无法实现预期的黑色背景效果？（注：预期效果为h5标题区域带有黑色背景，红色播放图标与黑色背景层级分明）

嗨，这问题我太熟了！咱得从堆叠上下文的特性唠起——你给div.card-body设opacity:0.99创建堆叠上下文没错，但这里踩了个很容易忽略的坑！

首先，你想要的黑色背景效果，应该是希望div.card-details-1能在h5的下方当背景对吧？但你现在把div.card-details-1的z-index设成20，比h5的10还大——这就搞反了啊兄弟！z-index的规则是数值越大，堆叠层级越高，显示在越上层，所以现在div.card-details-1是压在h5上面的，哪怕它有黑色背景，也会把h5盖住，自然看不到你想要的效果。

另外，再确认下：你代码里没给div.card-details-1加黑色背景样式吧？这也是个关键点，别忘了补个background-color: #000;（或者你想要的黑色调）。

还有，虽然你创建了堆叠上下文，但内部元素的z-index都是相对于这个父上下文排序的，只要调整好两个元素的z-index大小，再加上背景样式，就能搞定：

• 把div.card-details-1的z-index改成小于10的数值，比如5；
• 给它加上黑色背景样式；
• 两个元素都已经是position:relative，满足z-index生效的条件，这点没问题。

这样调整后，div.card-details-1就乖乖待在h5下面当背景了，你要的黑色效果就能正常显示啦！

内容的提问来源于stack exchange，提问作者PictureElement