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

Question

我的实际问题比较复杂，但归结为这个。我如何使用 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)。问题是模板最终位于菜单下。我尝试应用边距或填充，但弄乱了我的 bootstrap 网格。所以我希望菜单可以像它相对于主菜单一样对待 div，但仍然保持原样。

Answer 1

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

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

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

Answer 2

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

的情况

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

Do not allow relative positioned div to overlap absolute positioned div

html

css

position

absolute