CSS: a detail of the top property

The CSS top property accepts as its value also the auto keyword. If you use such a declaration, the absolutely positioned element will be put just below its nearest, non-positioned preceding sibling. So if you have a structure like this:

<div id="branding"></div>
<div id="content"></div>

If we absolutely position the second element, like so:

#content {
  position: absolute;
  top: auto;
  width: 100%;
}

then we'll get this effect, because we're using the auto value and the nearest preceding sibling is static, that is, non-positioned.

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

Leave a Reply

Note: Only a member of this blog may post a comment.