This chapter covers
- The types of element positioning: fixed, relative, and absolute
- Building modal dialogs and dropdown menus
- CSS triangles
- Understanding z-index and stacking contexts
- A new type of positioning: sticky
We’ve now looked at multiple ways to control the layout of the page, from table display to flexbox to floats. 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 where many developers only have a cursory understanding. Without a complete grasp on 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.