#top-level {

position: relative;

}

#second-level {

}

Now let’s see how that changes our page again (see Figure 6.3).

6.3

You will notice how the content has now skipped over its direct parent entirely and has positioned itself to the top-level div, even though it exists two levels up from itself in the page hierarchy. Well, this is because an absolutely positioned element will traverse up the chain to find its closest parent which is ‘positioned’ and align itself to it. Fantastic, right? I cannot emphasize enough how useful this technique is when it comes to the layout of your webpage.

Now let’s take things one step further and remove all the position: relative rules from our CSS. What do you expect to happen in this scenario where no positioned parent can be found?