如果父元素定位绝对，如何使它们覆盖子元素

Question

我想创建一个滑块，所以这里是代码：

div#list_container {
    position: relative;
    width: 100%;
}
div#first_list {
    position: absolute;
    left: 0px;
    top: 0px;
}
div#second_list {
    position: absolute;
    left: 70%;
    top: 0px;
}

<div id="list_container">
    <div id="first_list">
        <h1>Smth</h1>
    </div>

    <div id="second_list" class="aim_list">
        <h1>Smth</h1>
    </div>
</div>

<h2>Following elements</h2>

它有点管用（我只是更改 left 属性来移动它们），但是由于父级 (div#list_container) 被定位为相对的，所以它不包括子级元素，所以另一个元素，将在滑块上方显示。我该如何解决？

Answer 1

问题在于，由于您的子元素是绝对定位的，所以没有任何东西可以实际扩展父元素的框。要修复它，您可以根据您的设计目标向 div#list_container 添加高度。

Answer 2

当您将 child 元素的位置更改为绝对位置时，它们不再相对于其 parent 元素。在将 children 的位置更改为相对位置时使 parent 成为绝对位置，或者将高度添加到 parent.

我也强烈建议使用 CSS Flexbox 来实现它，否则将很难维护。看看你是否可以使用这个：

#list_container {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: space-around;

}


#list_container > *{
    flex-grow: 1;
}

如果父元素定位绝对，如何使它们覆盖子元素

How to make parent element cover children if they are positioned absolute

html

css

slider