Skip to Main Content
Cascading Style Sheets: The Definitive Guide
book

Cascading Style Sheets: The Definitive Guide

by Eric A. Meyer
May 2000
Intermediate to advanced content levelIntermediate to advanced
472 pages
14h 17m
English
O'Reilly Media, Inc.
Content preview from Cascading Style Sheets: The Definitive Guide

Relative Positioning

The simplest of the positioning schemes to understand is relative positioning. In this scheme, a positioned element is shifted by use of the side-offset properties. However, this can have some interesting consequences.

On the surface, it seems simple enough. Let’s say we want to shift an image up and to the left. Figure 9-15 shows us the result of these styles:

IMG {position: relative; top: -20px; left: -20px;}
A relatively positioned element

Figure 9-15. A relatively positioned element

All we’ve done here is offset the image’s top edge 20 pixels upward and offset the left edge 20 pixels to the left. However, notice the blank space where the image was previously positioned. That space exists because when an element is relatively positioned, it’s shifted from its normal place, but the space it would have occupied doesn’t disappear. Consider the results of the following styles, which are depicted in Figure 9-16:

EM {position: relative; top: 8em; color: gray;}
A relatively positioned EM element

Figure 9-16. A relatively positioned EM element

As you can see, the paragraph has some blank space in it. That’s where the EM element would have been, and the layout of the EM element in its new position exactly mirrors the space it left behind.

This works because the containing block of a relatively positioned element is the space that it would ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

Cascading Style Sheets: The Definitive Guide, Second Edition

Cascading Style Sheets: The Definitive Guide, Second Edition

Eric A. Meyer
CSS Mastery: Advanced Web Standards Solutions

CSS Mastery: Advanced Web Standards Solutions

Andy Budd, Simon Collison, Cameron Moll

Publisher Resources

ISBN: 1565926226Catalog PageErrata