Question

我为在线表单制作了一个简单的进度条。它工作得很好，直到我在包含div上添加了背景颜色。似乎当z-index设置为-1时，它隐藏在父项父项父项的背景之后。

以下JS Fiddle显示错误高于预期。 https://jsfiddle.net/h2e52oux/

如果有背景颜色，我该怎么做才能让顶部的工作与底部相同？

div {
  height: 100px;
}
div.bg {
  background-color: white;
}
ul {
  counter-reset: step;
}
li {
  list-style-type: none;
  width: 25%;
  text-align: center;
  font-style: italic;
  color: #999;
  float: left;
  position: relative;
}
li::before {
  content: counter(step);
  counter-increment: step;
  width: 1.5em;
  text-align: center;
  display: block;
  background: white;
  border: 1px solid #999;
  color: #999;
  margin: 0 auto 5px auto;
}
li:not(:first-child)::after {
  content: '';
  width: 100%;
  height: 3px;
  background: white;
  border: 1px solid #999;
  position: absolute;
  top: 0.5em;
  left: -50%;
  z-index: -1;
}
li.active {
  color: #222;
  font-style: normal;
}
li.active::before,
li.active::after {
  background: #b05d68;
  color: white;
  border: 0;
}

<div class="bg">
  <ul>
    <li class="active">One</li>
    <li class="active">Two</li>
    <li>Three</li>
    <li>Four</li>
  </ul>
</div>
<div>
  <ul>
    <li class="active">One</li>
    <li class="active">Two</li>
    <li>Three</li>
    <li>Four</li>
  </ul>
</div>

Answer 1

在你的情况下，无论你给z-index的数字是什么，添加以下行都足以完成工作。我故意将其设置为-2的值，使其在li以下1层，但可以根据需要进行更改。仅z-index 属性不起作用，因为它需要伴随position 属性并带有值与默认 static不同的任何内容。将其设置为relative的值是合乎逻辑的选择，因为我不想破坏您的布局。

div.bg {
  position: relative;
  z-index: -2;
}

Answer 2

尝试：

div.bg {
  position: relative;
  z-index: -2;
}

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

将z-index设置为-2表示背景div将堆叠在您的其他内容之下。

z-index为-1时，after伪元素隐藏在背景后面

2 个答案: