#top-level {

}

#second-level {

}

6.4

Was that what you were expecting? As you can see, when no positioned parent can be found, the element gets placed against the body of the webpage. This is a great technique for placing elements outside of the constraints of any other element, and allowing it to sit in isolation. This can be especially useful for building nav bars, buttons and sidebars.

This level of control that we have over our absolutely positioned elements is what makes them such a joy to use in web design. Developers are able to fine-tune exactly where they want an element to sit, regardless of where its parent is on the page. I cannot understate how useful this is for a developer.

Overlapping

We’ve seen two examples now, both of which have seen elements overlapping on the page. This is obviously a big issue as it causes a host of usability issues. CSS allows us a way of overcoming this problem by allowing us to ‘stack’ these elements. By stack, I mean choose the order of how the elements sit on top of one another. We can do this by making use of the z-index property.

z-index is a property that takes a number as its value. The number is its ‘importance’ in the stack. Let’s see an example.