Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Absolute positioning inside absolute position

I have 3 div elements.

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

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

3rd div is 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 div position absolute to the 2nd div (which is also absolute position to the 1st div) and not to 1st div that has relative position ?

Because the 3rd div is absolute positioning to the absolute positioned 2nd div.

like image 864
pufos Avatar asked May 08 '11 14:05

pufos


People also ask

How do you fix absolute position inside a div?

Set everything up as you would if you want to position: absolute inside a position: relative container, and then create a new fixed position div inside the div with position: absolute , but do not set its top and left properties. It will then be fixed wherever you want it, relative to the container.

What happens when an element is positioned absolutely?

Setting position: absolute An absolutely positioned element no longer exists in the normal document flow. Instead, it sits on its own layer separate from everything else. This is very useful: it means that we can create isolated UI features that don't interfere with the layout of other elements on the page.

Is it bad to use absolute positioning CSS?

As long as you structure your HTML so that the elements follow a logical order that makes sense when rendered without CSS, there is no reason why using absolute positioning should be considered bad practice.

What positioning style is considered a special case of absolute position?

Fixed positioning is really just a specialized form of absolute positioning; elements with fixed positioning are fixed relative to the viewport/browser window rather than the containing element; even if the page is scrolled, they stay in exactly the same position inside the browser window.


1 Answers

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.

like image 112
Pekka Avatar answered Sep 26 '22 01:09

Pekka