相对于绝对定位元素进行定位 - 可以吗？

Question

相对于绝对定位元素进行定位 - 可以吗？

css

3

我在页面上有一些绝对定位的空间，然后在这个空间内有多个绝对定位的元素...效果很好...每当我需要添加另一个元素时，我不必担心页面流动...我只需使用x-y平面将其放在我想要的位置。

我的问题是...现在我在其中一个绝对定位的元素中有一些动态内容...随着它的增长，它的z-index低于底部元素，因此它只会在下面的元素下面扩展。

我希望下面的元素在上面的元素扩展时向下移动。

我尝试将下面的元素的定位设置为"relative"，但这仅相对于父div...而不是它的兄弟div...因此它跳到页面顶部。 "static"定位具有相同的效果，它跳到了顶部。似乎相对和静态定位的元素基本上忽略了绝对定位的元素。

有没有办法让兄弟div在其兄弟元素增长时移动？

有没有办法让相对定位的元素“意识到”绝对定位的元素？

我喜欢绝对定位的元素，所以如果可能的话，我希望在仍然使用它们的情况下扩展内容。

- user656925

1

我认为你需要使用JavaScript/jQuery来完成这个操作；获取窗口尺寸，并根据它调整CSS的top属性；但是如果你发布网站的屏幕截图（或链接），可能会更容易帮助你。 - Toni Michel Caubet

发布相关的HTML/CSS内容 - user656925

1

为什么要放截图？添加一些代码并在 JSFiddle 上进行重现。 - My Head Hurts

你真的应该使用jQuery来完成这个...可以给一些代码吗？ - Tomas Ramirez Sarduy

这个在 JavaScript 中不是很容易做吗？ - David Spector

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ellawren · Accepted Answer

一个绝对定位的元素会忽略并被页面上的其他元素所忽略，从而有效地使其脱离文档流。因此严格来说，您无法做到您所要求的事情。

在这里，您可以做的是将两个元素包裹在一个绝对定位的div中，并相对定位它们之间的位置。然后，顶部div将始终保持在同一位置，底部div将根据需要向下移动。

<style>
    #wrapper { position:absolute; }
    #i_will_expand { position:relative; top:0px; left:0px; }
    #i_will_move_down { position:relative; top:0px; left:0px; }
</style>

<div id="wrapper">
    <div id="i_will_expand"></div>
    <div id="i_will_move_down"></div>
</div>

请记住，如果您在下面有其他内容，这些元素将覆盖它们，但是使用绝对定位就会出现这样的问题。