开发者社区> 问答> 正文

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

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

展开
收起
杨冬芳 2016-06-12 10:42:48 3152 0
1 条回答
写回答
取消 提交回答
  • IT从业

    父级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>

    这样不就在父元素下面了

    2019-07-17 19:33:24
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
零基础CSS入门教程 立即下载
低代码开发师(初级)实战教程 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载