ptg16476052306 LESSON 11: Using CSS to Position Elements on the Page
Output ▼
Using a combination of absolute and relative positioning, you can create complex pages
with many stacked layers. Using your browser’s developer tools is a great way to experi-
ment with stacking and positioning. It’s easy to open the developer tools, change the
z-index values for elements, and see how the stack order changes.
Floated elements also have their own special handing. They have a higher precedence in
the stacking order than elements in the normal flow, and they have a lower precedence
than positioned elements. If you need to raise their precedence, you can add relative posi-
tioning and assign a z-index to them.Creating Drop-Down Menus
Drop-down menus are one of the most common navigation techniques used on websites.
They enable you to provide deep navigation without requiring a lot of screen real estate.
To give a sneak preview, Figure 11.12 shows what the finished navigation menus will
look like when the menu is completed. In earlier times, such elements had to be created
using JavaScript, but CSS is powerful enough now that you can use it alone to build these
sorts of interface elements. Indeed, this example incorporates techniques that you’ve
already seen.FIGURE 11.11
A page that uses
z-index to control
positioning.