HTML and CSS Reference
In-Depth Information
Figure 11-13. The stacking context takes precedence over the value of z-index
The reason the flower isn't displayed in front is because its containing block has a lower z-index than the
containing block of the destination banner. It doesn't matter how high you make an element's z-index , it's the
z-index of its containing block that determines the ultimate stacking order.
Using CSS Positioning for Tooltips and Menus
When used in combination, relative and absolute positioning open up possibilities for dynamic techniques that
previously relied on JavaScript. For example, you can nest an absolutely positioned element inside a relatively
positioned one and hide its content by moving it offscreen or setting its display property to none . When the user
hovers over the relatively positioned element, you can reveal the absolutely positioned one by changing its offsets
or by setting its display property to block .
Creating Styled Tooltips
Browsers normally display the text of the title attribute as a tooltip when hovering over an image or link, but
there's no way to style automatically generated tooltips. Using an absolutely positioned element gives you full
control over how a tooltip looks.
Adding a Styled Tooltip to an Image
Images are inline elements, so to add a tooltip to an image, make its nearest containing block relatively
positioned. You can then nest a paragraph for the tooltip inside the same block, and make it absolutely
positioned. Use the absolutely positioned paragraph's offsets to hide it, and reset them when the user hovers over
the containing block.
Figure 11-14 shows a styled tooltip that is displayed when hovering over the image in tooltips.html.
Search WWH ::

Custom Search