Question

我遇到一个问题，我有一个绝对定位的div，它充当背景图像顶部的颜色叠加层。

我遇到的问题是，在这个绝对定位的div之后的所有内容都在它之后而不是在它之上。我无法弄清楚发生了什么。我知道它必须简单。

这是我目前的标记

#callout {
  background-image: url("http://i.imgur.com/FAHZdf9.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  position: relative;
  padding: 180px 0;
}

#callout h2 {
  color: #fff;
  text-align: center;
}

#callout p {
  padding: 0 50px;
  color: #fff
}

.bg-color {
  background-color: rgba(75, 78, 83, 0.6);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: .5s ease;
  transition: .5s ease;
}

<div id="callout">
  <div class="bg-color"></div>
  <h2 class="text-center">Test Heading</h2>
  <p class="text-center">This is test text, This is test text, This is test text, This is test text, This is test text, This is test text, This is test text, This is test text, This is test text, This is test text.</p>
</div>

Answer 1

为什么不把你的内容放在叠加层中，而不是搞乱z-index：

＆＃13;

#callout {
  background-image: url("http://i.imgur.com/FAHZdf9.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  
  /* set the size you want this to be */
  height: 400px;
}

#callout h2 {
  color: #fff;
  text-align: center;
}

#callout p {
  padding: 0 50px;
  color: #fff
}

.bg-color {
  /* this does not need to be absolutely positioned*/
  width: 100%;
  height: 100%;
  background-color: rgba(75, 78, 83, 0.6);
  -webkit-transition: .5s ease;
  transition: .5s ease;
  
  /* you can vertical align using flex */
  display: flex;
  flex-direction:column;
  justify-content:center;
}

＆＃13;

<div id="callout">
  <div class="bg-color">
    <h2 class="text-center">Test Heading</h2>
    <p class="text-center">This is test text, This is test text, This is test text, This is test text, This is test text, This is test text, This is test text, This is test text, This is test text, This is test text.</p>
  </div>
</div>

＆＃13;

Answer 2

将所有文字放入div并将该div应用于sed

如下所示

z-index and position: relative

.callout-text{
     z-index: 1;
     position: relative;
   }

Answer 3

您实际上不需要应用任何额外的z-index。只需设置位置：相对于.text-center。

堆叠顺序会将定位元素置于非定位元素之上（除非定位元素具有负z-index，但这与此无关）。

这就是为什么简单地为.text-center设置相对位置的原因。

.text-center {
  position: relative;
}

Answer 4

使用z-index：

＆＃13;

#callout {
  background-image: url("http://i.imgur.com/FAHZdf9.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  position: relative;
  padding: 180px 0;
  z-index: 50; /* added this */
}

#callout h2 {
  color: #fff;
  text-align: center;
}

#callout p {
  padding: 0 50px;
  //color: #fff;
  z-index: 51; /* added this */
  position: relative;
}

.bg-color {
  background-color: rgba(75, 78, 83, 0.6);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: .5s ease;
  transition: .5s ease;
  z-index: 0;
}

＆＃13;

<div id="callout">
  <div class="bg-color"></div>
  <h2 class="text-center">Test Heading</h2>
  <p class="text-center">This is test text, This is test text, This is test text, This is test text, This is test text, This is test text, This is test text, This is test text, This is test text, This is test text.</p>
</div>

＆＃13;

将z-index视为优先级; z-index越高，顶部越多<＃34; ＆＃34;它是

所有元素都落后于绝对叠加div

4 个答案: