How Does Relative And Absolute Positioning Work With Embedded Divs?

I need to position divs within divs, and I am getting crazy. I've read many docs on the net, but I am still not clear about behavior of relative and absolute positioning when divs

Solution 1:

I find it a little easier to understand this way:

If an item is position: relative, then any style settings for top, bottom, left, right positions are relative to where the item would have been in the normal layout flow. So:

position: relative;
top: 10px;

pushes an item 10px down lower than it would have otherwise been in the normal HTML layout.

If an item is position:absolute, then it is positioned relative to whatever the closest parent that is position: relative or position: absolute or relative to the body element if no parents meet that criteria. For example, if the immediate parent is `position: relative' and the child is:

position: absolute;
top: 10px;
left: 10px;

Then, the object will be positioned down and to the right by 10px from the upper left corner of the parent. When an object is position: absolute, it is removed from the layout of the page and it does not affect the layout of any other objects (except it's own children).

As an example, if you want to position three images on top of one another in a container object (perhaps so you can cycle through them in a slideshow, you would do so with this CSS:

.container {position: relative; height: 100px; width: 133px;}
.containerimg {position: absolute; top: 0; left: 0;}

Solution 2:

I am going to repeat the following block again

The best way I've found to understand absolute positioning is that position:relative looks "downstream" to child elements and position:absolute looks "upstream" to parent elements. That is, when you tell an HTML element to be absolutely positioned, it's going to look "up" to its parent elements until it finds one that is set to position:relative, and will position itself based on that. If it doesn't find one, it will position itself with respect to the by default.

Yes you need to have a position relative to your absolute parent, say body, Later on down the code you can have your elements absolute positioned with respect to the parent.

All in all absolute position is a kind of pain, when it comes to different screen resolutions.

But the way to go is to have parent relative position and then child absolute.

Solution 3:

Should I create a super relative parent div from which the whole hierarchy of div should be positioned as absolute?

Yes. Each absolutely-positioned element will be positioned within its closest ancestor that is itself absolutely or relatively positioned.