CHAPTER 7 ■ POSITIONING MODELSAtomic
Aliases hasLayout, Grouped
Problem You want content to be rendered in a block, not on it. In other words, you want text and
inline content to be rendered atomically with its block so that when the block is overlapped
by another block, its content is overlapped too.
The problem is that a browser renders static inline content in a separate layer above the
backgrounds of static blocks. When static blocks overlap each other, their backgrounds
overlap, but their inline content doesn’t! Notice in the example how the borders and
backgrounds of the blocks in the first division overlap, but their text doesn’t. All the major
browsers work this way because a stacking context renders all block backgrounds and
borders first, then all floats, and then all inline elements and content. This places the
backgrounds and borders of blocks in a layer below floats and inline content.
This may seem unusual because you tend to think of inline content as being in the blocks
that contain them, not on them. But it makes sense that inline elements are rendered on
blocks because inline content overflows by default.
Solution A positioned element is atomic, which means no external elements can be layered in
between its static descendants, its inline content, and its background. Notice in the second
division of the example how neighboring blocks overlap each other, including their inline
text. This is because they’re positioned, and the stacking context requires positioned
elements to be rendered atomically. You can use relative, absolute, and fixed positioning to
make an element atomic. Blocks set to overflow:scroll are also atomic because their
content is literally contained in the block’s scrollable area.
Pattern SELECTOR { position:RELATIVE_ABSOLUTE_FIXED; }^
Location This pattern applies to all elements.
Limitations overflow doesn’t consistently create atomicity in older browsers. Blocks set to
overflow:hidden are atomic in Firefox 2.0 and Internet Explorer 7, but not in Internet
Explorer 6 and other major browsers. Blocks set to overflow:scroll are atomic except for in
Internet Explorer 6. overflow consistently creates atomicity in newer browsers.
All tables and sized blocks are atomic in Internet Explorer 7, but not in other major
browsers. This is because Internet Explorer 7 and earlier versions use an internal feature and
a proprietary DOM property called hasLayout, which is true when an element has layout.
When an element has layout, it’s rendered in its own window with its own layout context. All
of its children are rendered atomically inside its rectangular box. It can’t shrinkwrap, and
external floats don’t affect the position of its inline content.
Tip Internet Explorer 6 has bugs that are sometimes fixed by triggering hasLayout. You can use
its proprietary property zoom:1 to trigger layout, but be aware that zoom causes your style
sheet not to validate.
Related to Positioned, Static, Absolute, Fixed, Relative, Float and Clear