HTML and CSS Reference
In-Depth Information
The only time you need to use static is if you want to override another style rule to make an element act like
normal HTML. For example, in a print style sheet that inherits styles from a screen style sheet, it's normal to reset
position to static for positioned elements to ensure they print out correctly (print style sheets are covered in
Chapter 16).
For an element to be considered positioned, its position property must be set to absolute , fixed , or
relative . An element that has its position property set to static is not considered to be positioned.
Identifying the Containing Block
Web pages are made up of boxes or blocks nested inside each other. In the normal flow of the document, the size
and position of a nested element are determined by its parent—or containing block .
With CSS positioning, an element's containing block isn't necessarily the same as its parent. It depends on
the value assigned to the position property:
If an element's
position is absolute , the containing block is the nearest positioned
ancestor. In other words, the containing block must have a position of absolute , fixed ,
or relative . If no such element exists, the page is the containing block.
If an element's
position is fixed , the containing block is the browser viewport.
If an element's
position is relative , the containing block is the nearest block level
ancestor—in other words, its parent.
most of the confusion surrounding Css positioning stems from not understanding the role of the containing
block, particularly with regard to absolute positioning. Keep reading, and all should become clear.
Setting the Offsets of a Positioned Element
You specify where an element is positioned by setting offsets from its containing block with the top , right ,
bottom , and left properties, all of which accept a length or a percentage. The offsets are calculated from the
same sides of the element and its containing block. Figure 11-1 shows an example of a positioned element with
the following offsets:
top: 100px;
left: 150px;
Search WWH ::

Custom Search