Positioning Controls
Each object on your web page has a position. The position is either determined by the flow of objects that precede it on the page or it can be defined specifically for the current object using these stylesheet attributes:
- position specifies how the position is to be determined. This can be static (the default) where the object is statically attached to the object that contains it, absolute where the position is defined independently of other objects on the page, relative where the position is defined relative to the parent object, or fixed where the position is defined relative to the brower window instead of relative to the page. Note that not all browsers currently support fixed properly.
- left specifies the left position of the object (that is positioned absolute or relative). This can be auto (the default) or can be specified as a length or percentage.
- top specifies the top position of the object (that is positioned absolute or relative). This can be auto (the default) or can be specified as a length or percentage.
- right specifies the right position of the object (that is positioned absolute or relative). This can be auto (the default) or can be specified as a length or percentage.
- bottom specifies the bottom position of the object (that is positioned absolute or relative). This can be auto (the default) or can be specified as a length or percentage.
- z-index specifies which layer the object is in (higher numbered layers will appear in front of lower numbered ones when their position overplaps). This can be auto (the default) or can be a positive number.
Length can be specified in a number of different ways:
- em width of letter M in current font
- ex width of letter x in current font
- cm centimetres
- mm millimetres
- pc picas
- pt points
- in inches
- px pixels
Examples
#myobj {position:absolute;left:50px;top:100px;z-index:5;}
#menu {position:fixed;}
