Absolute positioning within absolute position

Question

I have 3 div elements.

1st div bigger (wrapper) and has position:relative;

2nd div positioned absolute for the 1st div relative positioning (and is included in the 1st div )

The 3rd div contained in the 2nd div , and also has absolute positioning.

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

Why is the 3rd position of the div absolute for the 2nd div (which is also the absolute position of the 1st div ) and not the 1st div , which has a relative position?

Since the third div is the absolute positioning for the absolute position of the 2nd div .

Answer 1

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

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

Answer 2

Both position:relative and position:absolute set the containing elements as positioning invasions.

If you need to set div 3 based on div 1, make it a direct descendant of div 1.

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

Answer 3

Static position : the default static position is the element that appears in the normal stream of your HTML file, if no position is specified at all.

Important: top , right , bottom and left properties DO NOT HAVE AN EFFECT ON THE STATISTICS OF THE POSITIONED ITEM.

Positional relative: positioning an element with a relative value stores the element (and the space it occupies) in the normal stream of your HTML file.

Then you can move the element by a certain amount using the properties left , right , top and bottom . However, this can lead to the fact that the element overlaps other elements that are on the page, which may or may not be the effect that you want.

A relatively located element can move out of its spot, but the space it occupies remains.

Absolute position: Applying the absolute value of the position to the element removes it from the normal flow. When you move an element with an absolute position, its anchor point is the top / left part of its nearest containing element, which has a position declared different from static, also called its closest positioning context. So, if there is no element with a position other than static, then it will be located from the upper left corner of the body element.

In your case, the third nearest container contains the 2nd.

Answer 4

Another explanatory answer.

Your current scenario is this:

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

And you kind of struggle with that.

If you can change the HTML, just do the following:

 #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 */ 

Answer 5

The reason that the 3 div element is absolutely positioned in the second div element is because since the CSS specification explains here , because the “parent” element (better said: containing the block) of the position element is absolutely not necessarily its immediate parent element, but rather, its directly positioned , that is, any element whose position is set to everything except static , for example position: relative/absolute/fixed/sticky;

Therefore, if possible, in your code, if you want the 3 div element to be absolutely positioned with respect to the 1st div , you should make your second div element as position: static; which is its default value (or simply just remove any position: ... declaration in the ruleset of your second div element.

The above will make the first div containing the block of the 3rd absolutely positioned div , ignoring the second div for this purpose of positioning.

Hope this helps.