相对于绝对定位元素的定位 - 是可能吗？ [英] positioning relative to an absolute positioned element - is it possible?

问题描述

我在页面上有一些空间是绝对定位，然后有多个绝对定位的元素在这个空间...工作伟大...每当我需要添加另一个元素，我不必担心页面流...我只是把它放在我想要它使用xy平面。

I have some space on the page that is absolutely positioned, I then have multiple absolutely positioned elements with in this space...works great...whenever I need to add another elment I don't have to worry about page flow...i just put it where I want it using the x-y plane.

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

Problem I'm havin...is that now I have some dynamic content in one of the absolute positioned elements...as it grows it has z - index below the bottom element so it just expands under the element below it.

我想要的元素

我试着将elemenet的位置设置为relative，但这只是相对于父div。不是它的兄弟div ...因此它跳到页面的顶部。 静态定位具有相同的效果，它跳到顶部。看起来像绝对定位的元素本质上被相对和静态定位的元素忽略。

I tried setting the positioning of the elemenet below to "relative" but this is only relative to the parent div...not its sibling div...hence it jumps to the top of the page. "static" positioning has the same effect it jumps to the top. It seems like absolutely positioned elements are essentially ignored by relaive and static positioned elements.

有没有我的兄弟div可以随着兄弟成长而移动？

Is there as way I can have the sibling div move as its sibling grows?

有没有办法让相对定位的元素变得知道绝对定位的元素？

Is there any way to have relatively positioned elements become "aware" of absolutely positioned elements?

我喜欢绝对定位元素

推荐答案

一个绝对定位的元素忽略，被一切忽略否则在页面上，有效地把它从文档流，所以严格来说，你不能做你所要求的。

An absolutely positioned element ignores and is ignored by everything else on the page, effectively taking it out of the document flow, so strictly speaking you can't do what you're asking.

你可以在这里得到相同的效果是将两个元素包装在一个绝对定位的div中，并给它们相对的定位。然后顶部div将永远保持在同一个地方，底部div将根据需要向下移动。

What you could do here to get the same effect is wrap both elements in an absolutely positioned div and give them relative positioning to each other. Then the top div will always stay in the same place, and the bottom div will move down as necessary.

<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>

请记住，如果你还有其他的东西，这些元素会覆盖它们，是使用绝对定位的问题。

Keep in mind though that if you have anything else below, these elements will cover them up, but such is the problem with using absolute positioning.

这篇关于相对于绝对定位元素的定位 - 是可能吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！