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）。问题是模板最终会出现在菜单下面。我试图应用边距或填充，但是正在弄乱我的引导网格。所以我希望菜单可以被对待，因为它与主要div相关，但仍然保持不变。

Answer 1

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

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

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

Answer 2

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

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

2 个答案: