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

Absolute Positioning

Since most of the examples and figures in the chapter (besides the previous section) have been examples of absolute positioning, we’re already halfway to an understanding of how it works. Most of what remain are the details of what happens when absolute positioning is invoked.

When an element is positioned absolutely, it is completely removed from the document flow. It is then positioned with respect to its containing block, and its edges are placed using the side-offset properties. The positioned element does not flow around the content of other elements, nor does their content flow around the positioned element. This implies that an absolutely positioned element may overlap other elements, or be overlapped by them. (We’ll see how you can affect the overlapping order at the end of the chapter.)

Remember that the containing block of an absolutely positioned element is not necessarily its parent element. In fact, it often is not, unless the author takes steps to correct this situation. Fortunately, that’s easy to do. Just pick the element that you want to use as the containing block for the absolutely positioned element, and give it a position of relative with no offsets. Thus:

P.contain {position: relative;}

Consider the example in Figure 9-19. It shows two paragraphs that contain identical text. However, the first paragraph contains an inline boldface element, and the second an absolutely positioned boldface element. In the second paragraph, the styles used 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