Question

我有li里面有一个div，我希望div位于li之后，我使用z-index li框不在div,上，只有文字超出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。

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

1 个答案: