Margins and Absolute Positioning
Category: CSS, CSS3 Tutorial | 1,201 views | Add a Comment |
Getting a Handle on Absolute Elements
First recall how auto positioning is triggered, by letting the side-controlling properties of an absolutely positioned (AP) element be the default values of “auto” rather than some assigned length value. Those side properties are top, left, right, and bottom. When those values are auto, the AP element does not consider any positioned ancestors but instead looks at the current “static position” where it would be placed if it were a normally flowed (static) element. The AP element then occupies that location, but is still placed on a separate layer and may overlap parts of the flow.
This generally works fine, but in doing so we give up the ability to use length values on those side properties, which is normally what we do when tweaking AP elements into desired locations. If the static position does not happen to be exactly where we want the AP element to be, there’s only one possible way to offset auto positioned elements, by using margins.
The specs say that margins work on all AP elements and never collapse with other margins, greatly simplifying the situation. However, there is one question that could cause confusion, having to do with AP elements that start out as inline elements, such as spans and links.
As mentioned in a previous article, inline elements normally ignore all top and bottom margins and padding, but AP elements usually obey all margins and paddings even when they are mere spans or links. This is because the act of becoming AP turns them intocontaining blocks, or to be more specific, into block elements.
This is fine for the purposes of moving the AP elements around via margins, but it’s a little strange when you consider the first auto positioning demo from the previous article. Here’s that live demo:
Vestibulum lacus tellus, adipiscing in, volutpat sit amet, dictum ac, mauris. Duis euismod sapien quis tellus. Vivamus aliquam, lorem a accumsan consequat, dolor est iaculis est, nec pulvinar magna ipsum at lacus. Duis aliquam. Sed mattis. Morbi ipsum ipsum, euismod ut, scelerisque quis, faucibus et, tortor. Sed aliquam erat vel justo. Etiam lacinia, massa a ultrices pellentesque, Link textTooltip text dolor ante sagittis nibh, eget interdum ante lectus nec est. Fusce rutrum faucibus mauris. Aliquam cursus nisl at diam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse leo mauris, dictum et, dignissim sed, eleifend et, dolor.
<p> Vestibulum lacus tellus, adipiscing in, volutpat sit amet, dictum ac. Duis euismod sapien quis tellus. Vivamus aliquam, lorem a accumsan consequat, dolor est iaculis est, nec pulvinar magna ipsum at lacus. Duis aliquam. Sed mattis. Morbi ipsum ipsum, euismod ut, scelerisque quis, faucibus et, tortor. Sed aliquam erat vel justo. Etiam lacinia, massa a ultrices pellentesque, <a href="#" class="linkparent1">Link text<span>Tooltip text</span></a> dolor ante sagittis nibh, eget interdum ante lectus nec est. Fusce rutrum faucibus mauris. Aliquam cursus nisl at diam. Lorem ipsum dolor sit amet. </p> .linkparent1 { color: #a00; } .linkparent:hover span { left: auto; } /* this hover on the link changes the nested span's left value to auto */ .linkparent span { position: absolute; left: -999em; border: 1px solid white; background: #446; color: white; font-weight: bold; padding: 2px 4px; text-decoration: none; } /* tooltip may be custom styled as desired */ .linkparent:hover { background: url(bgfix.gif); } /* Applies 1x1 transparent bgfix.gif on hover - IE hover bug fix */
When the “Link text” link is hovered and the AP span popup appears in the window, auto positioning places that span in the spot where a simple inline span would go, even tho that span is AP and supposedly has become a block element. So as far as the browsers are concerned, the AP span is located like an inline element while at the same time it is treated as a block for all other styles such as margins, padding, and borders. Read more…
