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.
