CSS DIV Positioning (Absolute Inside Relative)

Question

In the class, we learned that if I have two divs: a wrapper div (let it be called div A ), which is defined as position: relative; and another div, div B , which is inside div A with position: absolute; .

What will happen is that now the position of div B depends on the position of div A This means that now the point 0,0 div B not the 0,0 point of the browser, but div A So, if I were to move div A , then say 20 pixels to the right, and div B 30 pixels to the right, div B - 50 pixels to the right of the browser point 0,0;

Now, my question is: what if I have 3 divs. Div A, which position: relative; , inside it div B , which is position: absolute , and inside div B , another div (div C ) with position: absolute; . Now, how will the div C behave? Will its position 0,0 be equal to div A or div B ?

Thanks in advance.

the code:

 <style type = "text/css"> #a { position: relative; left: 20px; } #b { position:absolute; left: 20px } #c { left: 20px position:absolute; } </style> <div id = "a"> <div id = "b"> <div id = "c"> test </div> </div> </div> 

Answer 1

As you can see from this JSFiddle , the position of the “C” div refers to his father “B” using

 position: absolute; 

Answer 2

I have nothing to add to these great answers, but here is an article that helped me understand the concept. http://alistapart.com/article/css-positioning-101

EDIT:

This article discusses that a div with an absolute position is positioned in the internal grid of its closest ancestor (parent, grandfather, etc.), which is fixed, relative or absolute. If not, this applies to the html document, but note that it still does not behave as it was fixed. It also covers the key differences between the three types of positions, as well as the type of static position.

static is the default position at which it does not create grids for child absolute positioned divs. You cannot use css properties top left right or bottom .

relative - creates a grid for children (children, grandchildren, etc.) of absolute positioned divs. You can use the top, left, right and bottom, but they move its “relative” to where it was before. When using the top, left, right, and bottom other elements, they still move where they were before.

absolute - creates a grid for children (children, grandchildren, etc.) of absolute positioned divs. You can use the top, left, right and bottom, but they move it relative to the grid of the nearest ancestor (parent, grandmother, etc.). Remember that meshes are created by fixed, absolute, and relative elements. When using the top, left, right, and bottom elements, the element exits the document stream. (This means that other objects pass through it.)

fixed - creates a grid for child absolute positioned divs. You can use the top, left, right and bottom, but they move it relative to the browser. When using the top, left, right and bottom margins, it leaves the document stream. (This means that other objects pass through it.)

Answer 3

Div B - any absolutely positioned element is positioned in accordance with it the nearest (absolute, relative or fixed) parent .

Answer 4

This is a matter of personal preference, but this article was the one that cleared me even more than AListApart one: http://learnlayout.com/position.html