Positioning and Block Properties

As you might recall, we took a look at absolute and relative positioning in this chapter, moving text and images around. Because the positioning style properties refer to position, they also refer to an element's box quite a bit. As mentioned earlier, an element's box is just the invisible rectangle it's drawn in.

bottom, top, left, right

• CSS2 values: <length><percentage>autoinherit

• Default value: auto

• Element support: All elements

• Browser support: [IE3, IE4, IE5, IE6, NS4, NS6]

• Style inherited: No

This property specifies how far a box's bottom, top, left, or right content edges should be from the box's containing area. You use these properties to position the box.

direction

• CSS1 values: ltrrtl

• CSS2 values: inherit

• Default value: ltr

• Element support: All elements

• Browser support: [IE5, IE6]

• Style inherited: Yes

This property gives the base writing direction of text (left to right or right to left).

display

• CSS1 values: inlineblocklist-item

• CSS2 values: run-in compactmarkertableinline-tabletable-row-grouptable-header-grouptable-footer-grouptable-rowtable-column- group table-columntable- cell table-captionnoneinherit

• Default value: inline

• Element support: All elements

• Browser support: [IE4, IE5, IE6]

• Style inherited: No

This property indicates how an element should be displayed. If you set this property to block , creating a block-level element, the element is displayed starting on a new line, and the following element also starts on a new line. The inline value, which is the default, specifies that elements should be displayed in the normal flow of elements.

float

• CSS1 values: leftrightnone

• CSS2 values: inherit

• Default value: None

• Element support: All but positioned elements

• Browser support: [IE4, IE5, IE6, NS4, NS6]

• Style inherited: No

You use this property to indicate whether a box should be positioned to the left, right, or not at all. Text will flow around the element.

position

• CSS2 values: staticrelativeabsolutefixedinherit

• Default value: static

• Element support: All elements, but not generated content

• Browser support: [IE4, IE5, IE6, NS4, NS6]

• Style inherited: No

This property indicates which positioning algorithm to use. This setting is important when you set properties such as left or right .

unicode-bidi

• CSS2 values: normalembed bidi-override inherit

• Default value: normal

• Element support: All elements

• Browser support: [IE5, IE6]

• Style inherited: No

You use this property to work with elements with reversed Unicode order.

z-index

• CSS2 values: auto<integer>inherit

• Default value: auto

• Element support: Positioned elements

• Browser support: [IE4, IE5, IE6, NS4, NS6]

• Style inherited: No

This property indicates the stacking level of a box. You use it when you position elements to indicate which element goes on top of which other element.