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

11

Positioning

WHAT YOU WILL LEARN IN THIS CHAPTER:

• 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

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.

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 dictate with precision where in a document you want an element to appear. You can choose whether an element appears relative to a container element, or relative to the browser window. You can layer elements one on top of another.

The following table outlines the position property and its values, and the four offset properties, top, right, bottom, and left, and their possible values.

PROPERTY	VALUE
position	static | relative | absolute | fixedInitial value: static ...