The Best-Practice Guide to xHTML and CSS phần 5 doc

110 |  chapter 5: Layout

Fixed

Fixed boxes (position: fixed) are similar to absolutely positioned boxes, apart from

the fact that they are fixed to the viewport. Like background images set to back￾ground-attachment: fixed (see Chapter 4), fixed boxes will not scroll when the

rest of the content does. Unlike fixed backgrounds, though, fixed boxes are not sup￾ported by Internet Explorer 6 (though they are supported in IE 7).

The Z-index

Because positioned boxes are pulled out of the normal flow and can sit on top of

one another, you may want to control which of these boxes appears where in this

stacking order. Suddenly we have three dimensions to think about—we have the

x-axis that governs where something is horizontally, the y-axis where something

is vertically, and now we have the z-axis, which governs depth. The x and y axes

are controlled by width, height, left, right, top, bottom, padding, margin,

and so on, but we don’t need anything so elaborate with the z-axis, we just need

to state the order in which things appear on top of each other.

Like Mighty Mouse, z-index is here to save the day.

This property is used to specify where in the stacking order a positioned box

should be. The higher the number, the higher the box is in the stack. z-index:

3 will be below z-index: 5 but above z-index: 1, for example.

Floating

Floating, using the float property, is another method that can be used to push

around boxes and manipulate how others respond to them.

A floated box will basically push the box to the far left (float: left) or right

(float: right) of its container and cause surrounding content to flow around it

rather than continue underneath it. A floated box will override any display type set￾ting and render the box as a block box.

www.htmldog.com/examples/float1.html

www.htmldog.com/examples/float2.html

Figure 5.16 A left-floated paragraph. See www.htmldog.com/examples/float1.html.

Figure 5.17 A left-floated paragraph and a right-floated paragraph. See www.htmldog.com/

examples/float2.html.

Floating  | 111

112 |  chapter 5: Layout

If you want an element that follows a floating box to start underneath the floated

box, rather than flow around it, you can use the property clear.

clear: left will clear all left-floated boxes, clear: right will clear all right-floated

boxes, and clear: both will do something I’m sure you’d never expect.

www.htmldog.com/examples/float3.html

Figure 5.18 The fourth paragraph is set to clear: left and so starts underneath the left￾floated paragraph rather than flowing around it. See www.htmldog.com/examples/float3.html.

Essentially, clearing works by increasing the top margin of the cleared box enough

so that it will start below the floated element. Because of this, the rules of margin

collapsing should be remembered: If the cleared box has a top margin explicitly

applied, it will only work if that margin is larger than the height of the floated box.

Then the margin will apply from the position of the box before it was cleared, rather

than from the bottom of the floated box.

For a few simple techniques involving floats, take a gander at www.htmldog.com/

articles/dropcaps/ and www.htmldog.com/articles/pullquotes/, which are accompa￾nied by a few bare-bone examples.