不允许相对定位的 div 与绝对定位的 div 重叠答案

【问题标题】：Do not allow relative positioned div to overlap absolute positioned div不允许相对定位的 div 与绝对定位的 div 重叠
【发布时间】：2015-12-18 02:29:18
【问题描述】：

我的实际问题更复杂，但归结为这一点。如何使用 CSS 禁止相对定位的 div 堆叠在绝对定位的 div 上。

问题示例：

<div id="absolute"></div>
<div id="relative"></div>

div{
  width: 100px;
  height: 100px;
  opacity: .5;
}

#absolute{
  position: absolute;
  background-color: red;
}
#relative{
  position: relative;
  background-color: blue;
}

Codepen

这可以用 css 实现吗？因此，相对定位的 div 将被向下或向一侧推，直到它不再覆盖另一个绝对定位的 div。基本上，相对 div 就像绝对 div 是相对的一样。

要添加一些性质的细节做问题：

我有一个网页，其顶部和左侧有一个绝对定位的菜单。然后我有一个 div，我在其中注入模板（Angular）。问题是模板最终位于菜单下。我试图应用边距或填充，但正在弄乱我的引导网格。所以我希望菜单可以被视为相对于主 div 而言是相对的，但仍保持原位。

【问题讨论】：

一个绝对定位的元素从文档流中移除，这意味着它不会影响其他元素。使用纯 CSS 是不可能的。
但是，如果你嵌套元素，你可以将top: 100%添加到相对定位的元素 - codepen.io/anon/pen/NxNjGQ

标签： html css position absolute

【解决方案1】：

当您使用position:absolute 时，您是在告诉浏览器布局引擎该元素已从页面布局中删除。您正在指定一个不会以任何方式影响页面布局的手动位置。因此，您不能既手动定位它又围绕它进行布局。

您必须选择其中之一，要么不要使用position: absolute，以便它参与页面布局，要么将所有内容设为绝对并手动定位不重叠。

有一些混合方法，其中项目可以绝对定位在容器中，并且容器本身是相对的（不是绝对的），因此容器参与页面的布局并且事物将围绕容器布置（因此如果容器设置为正确的大小，则围绕绝对定位的元素），但这实际上只是一个技术性问题，因为它将绝对定位的项目放入非绝对定位的容器中，因此它在整个页面上并不是真正的绝对定位不再。

【讨论】：

好的，谢谢。我只是希望除了使用 100 像素的边距之外我还能做些什么

【解决方案2】：

听起来您的问题可以通过分离元素并应用浮点属性来解决。但是，根据您的问题，当您使用 relative 属性时，它允许您设置相对于其父级的位置。如果绝对定位元素是父元素，那么您的代码是不正确的，并且将它们分开将是硬编码它们以保持彼此之间的最小距离的问题。但是，它不是父元素，因此元素之间没有关系，您必须明确定义它们的位置，以使它们不相互交互。但同样，这听起来像是应用 float 属性的情况。

【讨论】：