css - parent's position is absolute and child's position is relative and vice versa

Question

I have div which hosts another div. Ok, I get the case when the parent is position:relative and the child is position:absolute. I don't get what happens when

1. parent's position is absolute and child's position is relative
2. parent's position is absolute and child's position is absolute
3. parent's position is relative and child's position is relative

I use the JSbin example from Why does an absolute position element wrap based on its parent's right bound? but the question applies to positioning concept in general

Answer 1

Read more about absolute, relative, and fixed position and how they differ here, but I'll try to answer your question about relationships specifically.

position: absolute will position that element to its nearest parent with a position other than static. Static is the default for everything.

position: relative is a little weird because it really affects that element's children, not its own position. It's just saying to its child elements, "position yourself relative to me if you have position: absolute." A position of fixed or absolute does the same thing (meaning its positioned children will position themselves relative to its boundaries), but these styles also affect their own position on the page. An element with position: relative won't look any different, but its children might.

So consider a situation like this:

<div class="parent">
     <div class="child">
           <div class="grandchild"></div>
     </div>
</div>

If grandchild has position: absolute, it will position itself relative to the browser window because there is no parent with a position other than the default of static.

If parent also has position of relative, absolute, or fixed, grandchild will position itself relative to the boundaries of parent.

However, if child also has a position of relative, absolute, or fixed, the grandchild will position itself relative to child's boundaries, because it is the nearest parent with a position other than static.

In summary, relative affects an element's children, while absolute and fixed affect the element itself as well as its children.

And remember that position: fixed bypasses all relative and absolute parents and always positions itself relative to the browser window.