绝对位置内的绝对定位

我有3个 div元素。

第一个 div比较大(包装) ，有 position:relative;

第二个 div绝对定位于第一个 div相对定位(包括在第一个 div中)

第三个 div包含在第二个 div中，也有绝对定位。

<div id="1st">
<div id="2nd">
<div id="3rd"></div>
</div>
</div>

为什么第三个 div位置是绝对的第二个 div(也是绝对位置的第一个 div) ，而不是第一个 div有相对的位置？

因为第三个 div是绝对定位到第二个 div的绝对定位。

82577 次浏览
小开
最佳答案

Because position: absolute resets the relative position for children just as position: relative does.

There is no way around this - if you want the third div to be absolutely positioned relatively to the first one, you will have to make it a child of the first one.

小开

Both position:relative and position:absolute establish containing elements as positioning ascestors.

If you need div 3 to be positioned based on div 1 then make it a direct child of div 1.

Note that position: relative means the element is positioned relative to its natural position and position: absolute means the element is positioned relative to its first ABC2 or position:absolute ancestor.

小开

Yet another clarifying answer.

Your current scenario is this:

#my-parent {position: absolute}
#my-parent .my_child {position: absolute}

And you're kind of struggling with it.

If you can change the HTML, simply do this:

#my-parent {position: absolute}
#my-parent .my-wrapper {position: relative}        /* Since you've added the wrapper in HTML */
#my-parent .my-wrapper .my-child {position: absolute}  /* Now you can play with it */
小开

Position static: the static position is the default way an element will appear in the normal flow of your HTML file if no position is specified at all.

Important: top, right, bottom and left properties HAVE NO EFFECT ON A STATICALLY POSITIONED ELEMENT.

Position relative: positioning an element with the relative value keeps the element (and the space it occupies) in the normal flow of your HTML file.

You can then move the element by some amount using the properties left, right, top and bottom. However, this may cause the element to overlap other elements that are on the page—which may or may not be the effect that you want.

A relatively positioned element can move from its spot, but the space it occupied remains.

Position absolute: applying the absolute position value to an element removes it from the normal flow. When you move the absolute positioned element, its reference point is the top/left of its nearest containing element that has a position declared other than static—also called its nearest positioning context. So, if no containing element with a position other than static exists, then it will be positioned from the top-left corner of the body element.

In your case 3rd's nearest containing container is 2nd.

小开

The reason why the 3rd div element is absolutely positioned to the 2nd div element is because as the CSS spec explains here, is because the "parent" element (better said: containing block) of an absolutely positioned element is not necessarily its immediate parent element, but rather its immediate positioned element i.e. any element whose position is set to anything but static for example position: relative/absolute/fixed/sticky;

Hence, whenever possible in your code, if you want the 3rd div element be absolutely positioned in regards to the 1st div you should make your 2nd div element as position: static; which is its default value (or just simply remove any position: ... declaration in the rule set of your 2nd div element).

The above will make the 1st div the containing block of the 3rd absolutely positioned div, ignoring the 2nd div for this positioning purpose.

Hope it helps.

小开

In case anyone is still looking for an answer to this.

I was able to achieve this result by adding a clear: both; style to the first absolutely positioned div which reset the child and allowed it to use it's own absolute positioning.


提交答案