jquery - 列表项中的 Css z 索引不起作用

Question

我有一个 li，里面有一个 div，我希望 div 位于 li 后面> 并且我使用 z-index 并且出于某种原因 li 框不在 div 上， 只有文本在 上方分区。

ul {
  padding-left: 0;
  list-style: none;
  margin-top: 2em;
}
li {
  width: 87px;
  height: 69px;
  min-height: 69px;
  -webkit-border-radius: 3px/3px 3px 2px 2px;
  border-radius: 3px/3px 3px 2px 2px;
  background-color: #FFF;
  border: solid 1px #96CFFA;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  margin-left: 0.4em;
  position: relative;
  z-index: 1;
}
li div.best-value {
  position: absolute;
  height: 96px;
  width: 100%;
  background: #FF6700;
  top: -17px;
  color: #FFF;
  border-radius: 6px;
  z-index: -1;
}

<ul>
  <li>
    <div class="best-value">Best Value</div>some text</li>
</ul>

Answer 1

为了将子元素设置在父元素之上，您必须从父元素中删除 z-index 并为子元素保留负的 z-index 值。

ul {
  padding-left: 0;
  list-style: none;
  margin-top: 2em;
}
li {
  width: 87px;
  height: 69px;
  min-height: 69px;
  -webkit-border-radius: 3px/3px 3px 2px 2px;
  border-radius: 3px/3px 3px 2px 2px;
  background-color: #FFF;
  border: solid 1px #96CFFA;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  margin-left: 0.4em;
  position: relative;
  /* z-index: 1; */
}
li div.best-value {
  position: absolute;
  height: 96px;
  width: 100%;
  background: #FF6700;
  top: -17px;
  color: #FFF;
  border-radius: 6px;
  z-index: -1;
}

<ul>
  <li>
    <div class="best-value">Best Value</div>some text</li>
</ul>

有关堆栈上下文的更多信息，您可以查看:MDN - Stacking Context .