CSS Rules Part 3
Home > Build > Programming
> CSS
by
Don Herion
(1)
(2) (3) (4)
Positioning
Elements
These CSS1 properties allow designers to precisely position elements
on the page.
'display'
This property defines the type of display box the element creates. Each box interacts
differently with other boxes depending on how they are laid out. Here are your
choices:
inline (default)
block
list item (creates
a list item box)
marker (creates content that appears before or after a box)
none
run-in
compact
table, inline-table, table-row-group, table-column,
table-column-group, table-header-group, table-footer-group, table-row, table-cell,
and table caption
inherit
'position'
Defines the positioning method the browser will use. You have five
choices:
static (default)
relative (offset from normal
layout position)
absolute (offset from the containing box's position)
fixed (fixed to browser window)
inherit
'top,
right, bottom, left'
Defines the offset width from a chosen side
of an element. You have four choices:
auto (default)
valid
length
valid percent
inherit
| p {top: 100px; right: 200px; bottom: 300px; left: 25px} |
'width'
Defines
the width of a display box. You have four choices:
auto (default)
valid length
valid percent
inherit
| blockquote {width: 400px} |
'height'
Defines the height of a display box. You have four choices:
auto
(default)
valid length
valid percent
inherit
| blockquote {height: 75px} |
'line-height'
Defines the line spacing of a display box or element. You have five
choices:
normal (default)
valid length (the height of the
display box - i.e. pixels)
valid percent (percent of window used for box)
valid number (times the font size - i.e. 1.5)
inherit
| blockquote {line-height: 3.4} |
'vertical-alignment'
Defines the vertical position within a display box. You have eleven
choices:
baseline (default)
top (aligns to top of box)
middle (aligns to middle of box)
bottom (aligns to bottom of box)
sub
(subscript level)
super (superscript level)
text-top (box is aligned to
top of parent's text)
text-bottom (box is aligned to bottom of parent's text)
valid length
valid percent
inherit
| blockquote {vertical-align: middle} |
'float'
Gives the option to have the display box float to the right or left.
You have four choices:
none
left
right
inherit
'clear'
Defines whether the content appears adjacent to the side of the floating
box or not. You have five choices:
none
left
right
both
inherit
'visibility'
Defines whether the content is visible or not. You have four choices:
visible
hidden
collapse (same as hidden except when used inside a table)
inherit
'z-index'
This property defines the stacking order of elements. You have three
choices:
auto (default)
valid integer (higher places element
higher in stacking order)
inherit
