About Positioning Properties
= Index DOT Css by Brian Wilson =

  Main Index | Property Index | CSS Support History | Browser History  


Positioning Properties
position | top | right | bottom | left | vertical-align
overflow | overflow-x | overflow-y | clip | z-index

What Do They Do?
When an element is called 'positioned' in the visual formatting model, it may or may not be rendered immediately after the previous element in the document tree. An element that is positioned ('position' property ) has its rendering offset from the canvas origin or from its normal flow position via the 'top', 'right', 'bottom', and 'left' properties.

In addition to determining position offsets, positioning properties also specify the the visible display area of an element's rendering box ('clip') and directives indicating what should happen when an element's content falls outside the rendering box ('overflow'.)

But... positioning in CSS is not just about rendering in 2-dimensions. It also allows for placement and overlap of elements in an imaginary third dimension perpendicular to the screen ('z-axis'.)

The final property included in this category, 'vertical-align', is not involved with "CSS positioning" per se, but it does involve vertical positioning of content within a rendered line box.

Many of these properties were first introduced prior to CSS2 in the W3C Working draft "Positioning HTML Elements with Cascading Style Sheets" (http://www.w3.org/TR/WD-positioning, Robert Stevahn, Scott Furman, Scott Isaacs, et.al., 19 August, 1997)
Related Sites
Official Reference: CSS Level 1, Section 5.4.4
5.4.4: 'vertical-align'
Official Reference: CSS Level 2, Sections 9, 10 and 11
9.3.1: 'position'
9.3.2: 'top'
9.3.2: 'right'
9.3.2: 'bottom'
9.3.2: 'left'
9.9.1: 'z-index'
10.8: 'vertical-align'
11.1.1: 'overflow'
11.1.2: 'clip'
Browser Reference: Microsoft MSDN
'overflow-x'
'overflow-y'


Boring Copyright Stuff....