具有较低z-index的图像依赖于内容

Question

我试图创建一个标题英雄但我的问题是我的背景图像继续我的所有内容。实际上它的z-index低于内容，但我不知道为什么它不会出现在背景上。

＆＃13;

＆＃13;

.header
{
    width: 100vw;
    background-color: blue;
    position: relative;
}
.headerbakground
{
    position: absolute;
    width: 100%;
    z-index: 1;
}
.header ul li img,.header ul li
{
    width: 2vw;
    float: right;
}
.header .container
{
    z-index: 2;
}

＆＃13;

<div class="header">
      <!--background image-->
       <img src="https://www.renonation.sg/wp-content/uploads/2015/01/title-header-hero-01.jpg" class="headerbakground">
       <!--header top-->
       <div class="container">
           <ul>
               <li><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png" ></li>
               <li><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png" ></li>
               <li><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png" ></li>
               <li><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png" ></li>
               <li><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png" ></li>
           </ul>
       </div>
   </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

只有定位元素才能使用z-index。根据{{​​3}}：

  

z-index属性指定了一个被定位的z顺序（即一个具有静态以外的任何位置的元素）元素和   它的后代。

.container没有位置，因此会忽略z-index: 2。添加position: relative：

.header .container {
  position: relative;
  z-index: 2;
}

.header {
  width: 100vw;
  background-color: blue;
  position: relative;
}
.headerbakground {
  position: absolute;
  width: 100%;
  z-index: 1;
}
.header ul li img,
.header ul li {
  width: 10vw;
  float: right;
}
.header .container {
  position: relative;
  z-index: 2;
}

<div class="header">
  <!--background image-->
  <img src="https://www.renonation.sg/wp-content/uploads/2015/01/title-header-hero-01.jpg" class="headerbakground">
  <!--header top-->
  <div class="container">
    <ul>
      <li>
        <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
      </li>
      <li>
        <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
      </li>
      <li>
        <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
      </li>
      <li>
        <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
      </li>
      <li>
        <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
      </li>
    </ul>
  </div>
</div>

您还可以在要推回的元素上使用否定z-index: -1：

.headerbakground {
  position: absolute;
  width: 100%;
  z-index: -1;
}

.header {
  position: relative;
  width: 100vw;
  background-color: blue;
}
.headerbakground {
  position: absolute;
  width: 100%;
  z-index: -1;
}
.header ul li img,
.header ul li {
  width: 10vw;
  float: right;
}

<div class="header">
  <!--background image-->
  <img src="https://www.renonation.sg/wp-content/uploads/2015/01/title-header-hero-01.jpg" class="headerbakground">
  <!--header top-->
  <div class="container">
    <ul>
      <li>
        <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
      </li>
      <li>
        <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
      </li>
      <li>
        <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
      </li>
      <li>
        <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
      </li>
      <li>
        <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
      </li>
    </ul>
  </div>
</div>