O'Reilly logo

Beginning CSS: Cascading Style Sheets for Web Design, Third Edition by Richard York, Ian Pouncey

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

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

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