CODEWITHSUNDEEP
csshtml
William Northern
William Northern

Reputation: 403

CSS positioning of DIVs (absolute within relative)

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

What will happen is that now the position of div B is dependent on the position of div A. Meaning that now the point 0,0 of div B is not the point 0,0 of the browser, but of div A. So, if I was to move div A say 20 pixels to the right, and div B 30 pixels to the right, div B would be 50 pixels to the right of the browser's point 0,0;

Now, my question is: what if I have 3 divs. Div A that's position: relative;, within it div B that's position: absolute, and within div B, another div (div C) with position: absolute;. Now, how will div C behave? Will its position 0,0 be that of div A or div B?

Thanks in advance.

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>

Upvotes: 9

Views: 60977

Answers (4)

John
John

Reputation: 7359

I don't have much to add to both these great answers, but here's an article that helped me understand the concept. http://alistapart.com/article/css-positioning-101

EDIT:

That article covers that a div with position absolute is positioned on the inner grid of its closest ancestor(parent, grandparent, etc.) that is fixed, relative, or absolute. If there is none it is relative to the html document, but note it still behaves differently than fixed. It also covers the key differences between the three position types as well as the static position type.

static - this is the default position it creates no grids for children absolute positioned divs. You can't use the css properties top left right or bottom.

relative - creates a grid for descendent(children, grandchildren, etc.) absolute positioned divs. You can use top, left, right and bottom, but they move it 'relative' to where it was previously at. When using top, left, right, and bottom other elements still go around where it was previously at.

absolute - creates a grid for descendent(children, grandchildren, etc.) absolute positioned divs. You can use top, left, right and bottom, but they move it relative to the closest ancestor(parent, grandparent, etc.) grid. Remember the grids are created by fixed, absolute, and relative elements. When using top, left, right, and bottom the element goes out of the flow of the document. (this means other items go through it.)

fixed - creates a grid for children absolute positioned divs. You can use top, left, right and bottom but they move it relative to the browser. When using top, left, right and bottom goes out of the flow of the document. (this means other items go through it.)

Upvotes: 8

mercurial
mercurial

Reputation: 5503

It's a matter of personal preference, but this article was the one that cleared things up even more for me than the AListApart one: http://learnlayout.com/position.html

Upvotes: 1

ReDEyeS
ReDEyeS

Reputation: 851

As you can see from this JSFiddle, the position of "C" div is relative to its father "B" with

position: absolute;

Upvotes: 16

Adam Jenkins
Adam Jenkins

Reputation: 55792

Div B - any absolutely positioned element is positioned according to it's closest positioned (absolute, relative, or fixed) parent.

Upvotes: 6

Related Questions