Dreamweaver CS6: The Missing Manual

Absolute Positioning

Beyond float-based layouts, CSS’s other main technique for placing elements on a page, absolute positioning, lets you specify the exact position on a page for any element. But before you start thinking you’ve found page-layout heaven, keep in mind that the Web is a fluid environment that’s difficult to control with pixel-level precision. If a visitor increases the font size in her browser, the enlarged text may spill out of your carefully crafted layout. In addition, it’s nearly impossible to force a footer to the bottom of a page laid out using absolute positioning (a trivial task with float-based layouts). That’s why most CSS Layouts use floats and the techniques discussed at the beginning of this chapter.

That’s not to say you shouldn’t use absolute positioning. It’s great for moving small elements, like a logo, image, or short set of links, to a specific position on a page. And it’s the only way to have one element overlap another (see Figure 9-19). As long as you don’t try to dictate the exact width, height, and position of every page element, you’ll find absolute positioning powerful and helpful.

Figure 9-19. One unique aspect of CSS positioning is its ability to place an element on top of other page content. That lets the drop-down menu pictured here overlap the page content below it.

The CSS Positioning Properties

Several CSS properties position elements onscreen. ...