html – 隐藏父级div中浮动div的问题

2023年9月27日 181次阅读

所以,我试图让浮动的div隐藏在父母的div中,但它不起作用……

我的代码：

CSS：

        div.scrollarea {
            overflow: scroll;
            width: 400px;
            float: left;
        }

        div.td {                
            float: left;
            width: 100px;
            height: 20px;
            background-color: red;
        }

HTML：

        <div class="scrollarea">
            <div class="td">x1</div>
            <div class="td">x2</div>
            <div class="td">x3</div>
            <div class="td">x4</div>
            <div class="td">x5</div>
        </div>

所以我得到的是：
(由于防止垃圾邮件无法上传图片,所以这里是链接)
http://i.stack.imgur.com/I0cH1.png

我想得到的是将所有.td放在同一行,水平滚动会出现.

谢谢,

最佳答案 要隐藏父元素中的元素,您必须使父元素相对定位,子元素必须绝对,然后使用z-index隐藏父元素后面的子元素,如下所示：

#parentID{
  position: 'relative';        /* required */
  /* more needed styles */
}

#child_element{                /* or class here instead of id */
  position: 'absolute';        /* required */
  z-index:-99;                 /* reqyured */
  /* more needed styles */
}

要使子项出现,您必须将其z-index属性设置为大于0的任何值

点赞