Z 索引不起作用答案

【问题标题】：Z-Index is not workingZ 索引不起作用
【发布时间】：2017-09-12 12:35:52
【问题描述】：

https://codepen.io/anon/pen/veBQYy?editors=1100

我有一个带有类过滤器的 div。那个div是为了让背景图片更亮。我正在尝试使带有类内部的 div 位于过滤器之上。所以我把 z index: 9999 放在内部 div 上，但它没有到顶部

html, body {
  height: 100%;
}

.outer {
  display: table;
  height: 100%;
  width: 100%; 
  background: url('https://static.pexels.com/photos/56875/tree-dawn-nature-bucovina-56875.jpeg');      
  background-size: cover;      
}

.middle {
  display: table-cell;
  width: 100%;
  vertical-align: middle;
  text-align: center; // Center everything in div
}           

/* To dim background */
.filter {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-color: black;
  opacity: 0.5;    
}

/* This is not working. Z index not bringing it to the top */
.inner {
  z-index: 9999;  
}

h1 {
  color: white;
}

<section class="outer">
  <div class="middle">
    <div class="filter"></div>
    <div class="inner">
      <h1>Need</h1>
      <h1>This to go on top zindex 9999 not working</h1>
    </div>
  </div>
</section>

【问题讨论】：

标签： html css

【解决方案1】：

您需要使.inner div 位置相对

.inner {
  z-index: 9999;  
  position: relative;
}

z-index 仅适用于定位元素（位置：绝对、位置：相对或位置：固定）。

https://www.w3schools.com/cssref/pr_pos_z-index.asp

【讨论】：

【解决方案2】：

div.filter 绝对定位块在正常流程之外呈现。 div.inner 处于正常流程中。在这种情况下，您需要更改 div.filter。

当您将位置属性引入混合时，任何定位元素（及其子元素）都会显示在任何非定位元素的前面。（说一个元素是“定位的”意味着它有一个静态以外的位置值，例如，相对的、绝对的等）。

这些已定位的块与未定位的块的堆叠顺序不同。 IE z-index:9999;不会将未定位的块放在顶部。但是，您可以将已定位的块放在未定位的块下方。

.filter {   
  z-index:-1;
}

html, body {
  height: 100%;
}

.outer {
  display: table;
  height: 100%;
  width: 100%; 
  background: url('https://static.pexels.com/photos/56875/tree-dawn-nature-bucovina-56875.jpeg');      
  background-size: cover;      
}

.middle {
  display: table-cell;
  width: 100%;
  vertical-align: middle;
  text-align: center; // Center everything in div
}           

/* To dim background */
.filter {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-color: black;
  opacity: 0.5;    
  z-index:-1;
}

/* This is not working. Z index not bringing it to the top */
.inner {
  z-index: 9999;  
}

h1 {
  color: white;
}

<section class="outer">
  <div class="middle">
    <div class="filter"></div>
    <div class="inner">
      <h1>Need</h1>
      <h1>This to go on top zindex 9999 not working</h1>
    </div>
  </div>
</section>

【讨论】：