Fiddle Update或Fiddle Update 2

Question

我有一个带有内容div和按钮的主包装器div。该按钮应该位于内容div的下方，但由于某种原因它与它重叠。

内容div有css：

#groupMembers {
    position: absolute;
    height: 50%;
    width: 90%;
    left: 5%;
    overflow: scroll;
    display: inline-block;
}

，按钮有：

button {
    display: inline-block;
    width: 70%;
    left: 15%;
}

我认为既然它们都是内联块，它们不会重叠，但出于某种原因它们是。我做了一个JsFiddle来展示：http://jsfiddle.net/b5hp6boz/

有人可以帮助我让按钮显示在内容div下面吗？

Answer 1

删除（广泛）使用绝对定位....如有必要，请将其更改为position: relative;。但是在许多要素上甚至没有必要。

将按钮div移动到您想要它的HTML中的<h4>add members</h4>下面。

然后调整#DIV_05和按钮的边距。

_{（注意我只是在CSS中执行搜索以将absolute更改为relative，然后从那里进行调整。）}

通过如此广泛地使用绝对定位，你迫使元素进入不自然的位置。然后，当它没有工作...你想知道为什么。让事情落到他们自然想要堕落的地方。为整体渲染顺序更改 HTML ，不要强制使用绝对定位。

绝对位置的使用最常用于调整z-index并使元素不会改变其他元素的定位。（就像全球各种各样的浮动）它不应该是在任何布局中定位所有的后退。

Answer 2

您的代码中的问题是您已经为position: absolute;提供了以下CSS：

BUTTON_105

通过为HTML元素提供绝对位置，通过不在文档中获取任何空间将其从正常呈现过程中移除。这意味着它不会影响以下H4_4元素的位置。这就是按钮位于position: absolute;元素正下方的原因（这是第一个没有绝对位置的元素）。

要解决此问题，只需删除#DIV_5的{{1}}声明即可。（顺便说一句：你应该尽量不要大量使用绝对定位，因为它可能会导致进一步的问题。）

Answer 3

尝试为div标签提供更高的z-index值。