Beginning CSS: Cascading Style Sheets for Web Design, Second Edition

Chapter 11. Positioning

This chapter examines the various properties that CSS provides to position elements in a document. Positioning can be thought of as layering, in that the various elements of a page can be layered on top of others and given specific places to appear in the browser's window. In this chapter I discuss:

• The position property and the four types of positioning that CSS has to offer: static, relative, absolute, and fixed

• The offset properties top, right, bottom, and left, and how these are used to deliver an element to a specific position in a web document

• The z-index property and how this property is used to layer the elements of a document

• Some practical applications of positioning, such as multicolumn layouts and vertically centering a positioned element

Positioning makes CSS a very powerful presentational language, and further enhances its flexibility. Like floating elements, positioning offers some unique characteristics that allow behavior you might not always expect. This chapter begins the discussion of positioning with none other than the position property.

Introduction to Positioning

The position property is used to give elements different types of positioning. Positioning, gives you the ability to, with precision, dictate where in a document you want an element to appear. You can choose whether an element appears relative to another element, or relative to the browser window. You can layer elements one on top of another.

The following table outlines the position ...