将一个绝对定位元素放在另一个下面

Question

我有两个绝对定位元素。他们需要绝对定位，因为他们使用左右。上面的一个也使用顶部，下面的一个没有边距，因此在向下滚动后将“连接”到浏览器窗口的底部。对于上面的一个，我使用min-height来保持我想要的样式，同时仍然不能阻止它在需要时增长（因为动态内容或小显示）。如何确保下部元素始终低于上部元素？

我正在寻找一个没有javascript工作的解决方案。

Answer 1

我会将你的两个元素称为header-div和content-div。尝试在它们周围添加包装div。您的HTML应如下所示：

<div id="wrapper">
   <div id="header">
   </div>

   <div id="header">
   </div>
</div>

现在使用header-div中的值绝对定位wrapper：

#wrapper {
   position: absolute;
   top: yourvalue;
   left: yourvalue;
   right: yourvalue;
}

然后为标题添加一些样式，设置min-height：

#header {
   min-height: yourvalue;
}

现在，您可以在内容上使用边距，根据需要定位，例如，如果标题应包含left: 350px;而您的内容left: 300px;，则可以使用

#content {
   margin-left: -50px;
}

希望这是你需要的;）