Question

我目前有一组如下的元素：

<ul class="stats clearfix">
    <li class="first">
       <span>93%</span>
    </li>
    <li>
       <span>
         <strong>€ 5.500</strong>Goal
       </span>
    </li>
    <li class="last">
       <span>
         <strong class="no-end-date">-</strong>
       </span>
    </li>
</ul>

每个li元素都有背景颜色，但是我想在它们的顶部制作一个div，它有自己的背景颜色，应该覆盖其他li元素的其他背景颜色。我已经尝试用div包装ul元素并将所有元素的位置设置为relative，并且我的div的z-index为100，但背景颜色似乎在ul元素后面而不是在它的顶部。有什么建议？这是我试过的html和css

<div id="myoverlay" style="
   position: relative;
   z-index: 100;
   background-color: black;
   ">
   <ul class="stats clearfix" style="
      position: relative;
      ">
      <li class="first">
         <span>93%</span>
      </li>
      <li>
         <span>
         <strong>€ 5.500</strong>
         Goal</span>
      </li>
      <li class="last">
         <span>
         <strong class="no-end-date">-</strong>
         </span>
      </li>
   </ul>
</div>

Answer 1

您可以在列表旁边放置一个绝对定位的div元素，并将它们都包含在position: relative的容器中。

li {
  background-color: red;
}

.container {
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  z-index: 100;
  
  background-color: black;
  opacity: 0.5;
}

<div class="container">
   <div class="overlay"></div>
   <ul class="stats clearfix">
      <li class="first">
         <span>93%</span>
      </li>
      <li>
         <span>
         <strong>€ 5.500</strong>
         Goal</span>
      </li>
      <li class="last">
         <span>
         <strong class="no-end-date">-</strong>
         </span>
      </li>
   </ul>
</div>

在其他元素之上制作div背景色

1 个答案: