6 Positioning and stacking contexts
This chapter covers
- The types of element positioning: fixed, relative, absolute, and sticky
- Building modal dialogs and dropdown menus
- Understanding z-index and stacking contexts
- Drawing a simple triangle with CSS
We’ve now looked at multiple ways to control the layout of the page, from normal document flow to flexbox and grid. In this chapter, we’ll look at one important technique: the position property, which you can use to build dropdown menus, modal dialogs, and other essential effects for modern web applications.
Positioning can get complicated. It’s a subject of which many developers only have a cursory understanding. Without a complete grasp of positioning, and the ramifications involved, it’s easy to dig yourself into a hole. You can find yourself with the wrong elements in front of others, and correcting the problem isn’t always straightforward.
As we look at the various types of positioning, I’ll make sure you understand precisely what they do. Then you’ll learn about something called a stacking context, which is a sort of hidden side effect of positioning. Understanding the stacking context will keep you out of trouble, and if you ever find yourself “out in the weeds” with a page layout, this understanding will give you the tools you need to get back on track.