O'Reilly logo

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

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required