Question

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>

Answer 1

您需要将.inner div位置设为相对

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

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

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

Answer 2

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

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

这些定位块偏离未定位块的堆叠顺序。 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>

Z-Index不起作用

2 个答案: