Positioning Elements Precisely - Beginning CSS3 - page 256

Although Internet Explorer supports the clip property, it appears not to regard clicking the image as
triggering the :active pseudo-class. There's also a bug in IE 6 and IE 7, which don't accept the offsets as a
comma-separated list. For compatibility, all other mainstream browsers accept leaving out the commas. But
unless you need to use clip with older versions of Internet Explorer, I recommend using the correct syntax.

■ The styles in clip.html animate the clip property using a Css transition. Using Css transforms and transi-
tions is covered in Chapter 20.

Note

Summary
CSS positioning gives you control over the placement of an element by setting the position property and
specifying how far the sides should be offset from the element's containing block by using the top , right , bottom ,
and left properties. There are three types of positioning—fixed, relative, and absolute.
Fixed positioning, which is supported by all desktop browsers except IE 6, anchors an element inside the
browser viewport. Once an element is fixed, it remains in the same position in the browser window, even when
the rest of the page is scrolled. Although this can be useful for keeping navigation onscreen at all times, it reduces
the available space for other content, so should be used with care. Older mobile browsers have partial support or
none at all for fixed positioning, so it's best avoided in styles for mobile devices.
Relative positioning is mainly used in combination with absolute positioning. A relatively positioned
element remains in its normal place within the document flow, but it acts as the containing block from which an
absolutely positioned element's offsets are calculated. This allows you to superimpose elements, such as banner
images and search fields, in a precise position in relation to other content. You can also use a combination of
relative and absolute positioning to display tooltips and drop-down menus without the need for JavaScript.
However, pure CSS drop-down menus present problems for keyboard navigation, so you need to provide
supplementary links to maintain accessibility.
The most important aspect of CSS positioning is that it removes elements from the normal flow of the
document, and floats them on independent layers in front of nonpositioned content. Positioned elements don't
interact with other elements, so you can't flow content around them. You can change the stacking order of
positioned elements by setting the z-index property; elements with a higher z-index appear in front of those
with a lower one. However, each containing block creates its own stacking context. When positioned elements
in different stacking contexts overlap, the z-index of the containing block determines which element appears in
front.
The clip property is arguably the least useful part of the CSS positioning toolkit. It masks an absolutely
positioned element, displaying only one rectangular section.
If you've been reading each chapter in order, by now you've covered all the main basic features in CSS—and
some advanced ones too. Your journey through CSS still has a long way to go, but in the next chapter, I'll offer an
overview of CSS page layout strategies that work in most current browsers.