9.3 Positioning schemes

Chapter 9 - Visual formatting model - 9.3 Positioning schemes

Go to the relevant page of the specification.

position-absolute-001
Absolute positions impact on later siblings
Absolute positioned elements do not impact later siblings.
position-relative-004
Relative positioning dimensions
Relative positioning with left or right does not change size of a box.
position-relative-005
Relative positioning with left
Relatively positioned element with the left specified offsets the element from the left of the containing block.
position-relative-006
Relative positioning with right
Relatively positioned element with the right specified offsets the element from the right of the containing block.
position-relative-007
Relative positioning with 'left' set and 'right' 'auto'
Relatively positioned element with 'left' set to 'auto' and 'right' set to a value appears at expected offset.
position-relative-008
Relative positioning with 'right' set and 'left' 'auto'
If 'right' offset of a relatively positioned box is specified as 'auto', then its computed value is minus the value of 'left' offset. A relatively positioned box with 'left' set to a value moves the box to the left by the value of 'right'.
position-relative-009
Over-constrained situation with position 'left' property
If the 'direction' property of the containing block is 'ltr', the value of 'left' wins and 'right' becomes negative 'left'.
position-relative-010
Over-constrained situation with position 'right' property
If the 'direction' property of the containing block is 'rtl', the value of 'right' wins and 'left' becomes negative 'right'.
position-relative-013
Relative positioning with top and bottom do not change element dimensions
Relatively positioned element dimensions are not changed with top/bottom applied.
position-relative-014
Relative positioning with top
Relatively positioned element dimensions are not changed with top applied.
position-relative-015
Relative positioning with bottom
Relatively positioned element dimensions are not changed with bottom applied.
position-relative-016
Relative positioning and computed top/bottom values
Used value of top equals negative bottom when top is auto and bottom is given. (Computed value of top remains auto.)
position-relative-017
Relative positioning and computed 'top'/'bottom' set to 'auto'
Computed values are zero when both 'top' and 'bottom' are set to 'auto'.
position-relative-018
Relative positioning and computed values when 'bottom' is set to 'auto'
Computed value of 'bottom' set to 'auto' is equal to negative 'top'.
position-relative-019
Relative positioning 'bottom' ignored if 'top' and 'bottom' are both not 'auto'
The 'bottom' value is ignored if neither 'top' or 'bottom' is 'auto'.
position-relative-020 (interact)
Relative positioning and overflow: auto
If relative positioning causes overflow the user agent needs to provide a scrolling mechanism to all of the content at its offset position.
position-relative-021 (interact)
Relative positioning and overflow: scroll
If relative positioning causes overflow the user agent needs to provide a scrolling mechanism to all of the content at its offset position.
position-relative-nested-001
Vertical centering with negative and positive top positioning
Equal 50% positive and negative positioning can vertically center objects.
positioning-float-001
Positioning a left floated element
Floating a box will first lay out the box then shift it to the left.
positioning-float-002
Positioning a right floated element
Floating a box will first lay out the box then shift it to the right.