CSS Positioning Explained
I'm embarrased to say that despite messing around with web design for
years, I've never fully understood CSS positioning - specifically the
use of absolute positioning and the idea of a containing block.
You see, when an absolute positioned block is given a percentage width, it's width is calculated based on the width of the containing block. This gets confusing when you realise the containing block is not the same as the parent block.
Versions of Internet Explorer prior to 7, and even Opera prior to
version 9, calculated the width of an absolute positioned object based
on the width of the parent block instead of the containing block.
So
what is a containing block? Very quickly, it's the first ancestor
block (i.e. parent, grand-parent, etc.) whose position is set to
relative. If no ancestor blocks have a relative position then the
width is proportional to the width of the browser window.
To get an intimate understanding of CSS positioning and absolute position, in terms that are easy to understand, refer to Web Design 101: Positioning.
Filed In:
Comments
No comments have been posted.
Rules: Paragraphs and linebreaks are automatically created (two or more linebreaks create a paragraph). Linebreaks between code tags remain linebreaks. Block tags cannot be enclosed by inline tags. Red attributes are required and green is optional.
Use "<" and ">" for "<" and ">". Enclosing PHP code in <code> tags will highlight the code (i.e. <code><?php echo 'hello world'; ?></code>).
List of valid tags:
<blockquote title="" cite=""></blockquote><cite cite="" title=""></cite><a href="" title=""></a><strong title=""></strong><em title=""></em><code title=""></code><abbr title=""></abbr><acronym title=""></acronym><ol title=""></ol><ul title=""></ul><li title=""></li>
