CSS怎么让子元素叠在父元素的下面？z-index无效。

demo如上，我在li里又嵌了一层ul，绝对定位为什么不能让ul叠在li元素的下面呢？
我想让子元素叠在父元素下面，达到一个选项卡的效果该怎么做？

css html

阅读 12.6k

4 个回答

prototype_eva

✓ 已被采纳

父级position：relative; z-index:0;
子级position: absolute; z-index:-1;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
ul {
  float: left;
}

ul li {
  list-style: none;
  margin: 7px 20px 6px 0;
  float: left;
  position: relative;
  cursor: pointer;
  background: $fff;
  z-index: 999;
}
ul li span{
    height: 20px;
    padding: 0 5px;
    line-height: 20px;
    display:inline-block;
    background:#fff;
    border: #555 1px solid;
}
ul li:hover .sub-ul {
  display: block;
}

ul li .sub-ul {
  position: absolute;
  width: 180px;
  left: 0px;
  border: red 1px solid;
  background: #fff;
  display: none;
  z-index: -1;
  top:10px;
}

ul li .sub-ul li {
  border: none;
  height: 23px;
  margin: 0px;
  line-height: 23px;
  float: left;
}
</style>
<body>
    <ul>
      <li><span>手机</span>
        <ul class="sub-ul cl">
          <li>智能机</li>
          <li>功能机</li>
          <li>对讲机</li>
        </ul>
      </li>
    </ul>
</body>
</html>

这样不就在父元素下面了