HTML and CSS Reference
In-Depth Information
The
top
,
right
,
bottom
, and
left
values also can be set to
auto
, which matches the
specifi ed edge of the clipping region to the edge of the parent element. For example, a
clip value of
rect(10, auto, 125, 75)
creates a clipping rectangle whose right edge
matches the right edge of the parent element. To remove clipping completely, apply the
style
clip: auto
. Clipping can only be applied when the object is placed using abso-
lute positioning.
Semi-Transparent Images
The background image of Dan Atwood in the president's message section contains a
transparent background to allow the color and background of the president's message
box to show through. Transparent backgrounds are supported in the PNG and GIF image
formats, but not in JPEG images. The GIF image format represents an older standard
that can support a basic color palette of only 256 colors. The newer png format supports
the complete color palette of 16.7 million colors and also supports the alpha channel,
enabling designers to use transparent or semi-transparent colors.
Check with the documentation for your graphics software to learn how you can create
transparent or semi-transparent colors for use in your Web site designs.
Stacking Elements
Positioning elements can sometimes lead to objects that overlap each other. By default,
elements that are loaded later by the browser are displayed on top of elements that are
loaded earlier. In addition, elements placed using CSS positioning are stacked on top of
elements that are not. To specify a different stacking order, use the style property
z-index:
value
;
where
value
is a positive or negative integer, or the keyword
auto
. As shown in
Figure 4-73, objects are stacked based on their z-index values, with the highest z-index
values placed on top. A value of
auto
allows browsers to determine the stacking order
using the default rules.
Figure 4-73
Using the z-index property to stack elements
z-index: 1
z-index: 3
z-index: 2
The
z-index
property works only for elements that are placed with absolute posi-
tioning. Also, an element's z-index value determines its position relative only to other
elements that share a common parent; the style has no impact when applied to elements
