Chapter 4. Using Alternative Positioning

In This Chapter

  • Setting position to absolute

  • Managing z-index

  • Creating fixed and flexible layouts

  • Working with fixed and relative positioning

Floating layouts (described in Chapter 3 of this minibook) are the preferred way to set up page layouts today, but some other alternatives are sometimes useful. You can use absolute, relative, or fixed positioning techniques to put all your page elements exactly where you want them. Well, almost exactly. It's still Web development, where nothing's exact.

Still, the techniques described in this chapter will give you even more capabilities when it comes to setting up great-looking Web sites.

Working with Absolute Positioning

Begin by considering the default layout mechanism. Figure 4-1 shows a page with two paragraphs on it.

I used CSS to give each paragraph a different color (to aid in discussion later) and to set a specific height and width. The positioning is left to the default layout manager, which positions the second (black) paragraph directly below the first (blue) one.

These two paragraphs have a set height and width, but default positioning.

Figure 4.1. These two paragraphs have a set height and width, but default positioning.

Setting up the HTML

The code is unsurprising:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. 0 Strict//EN" "http://www. w3. org/TR/xhtml1/DTD/xhtml1-strict. dtd"> <html lang="EN" dir="ltr" xmlns="http://www. w3. org/1999/xhtml"> <head> <meta http-equiv="content-type" ...

Get HTML, XHTML, and CSS All-In-One Desk Reference For Dummies® now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial