You are here: Home > DHTML section > Interactive demo on CSS positioning
Interactive demo page on CSS positioning
You can drag and move the Position block around
The yellow box is a nested <div> inside the blue box
Red is nested in yellow
A positioned element should be positioned
to the nearest containing positioned element, not the containing element.
http://www.opera.com/docs/specs/opera6/#css
The containing block for a positioned box is established by the nearest
positioned ancestor (or, if none exists, the initial containing
block) http://www.w3.org/TR/CSS21/visuren.html#q28
The values of this property have the following meanings:
static
The box is a normal box, laid out according to the normal flow. The
'left' and 'top' properties do not apply.
relative
The box's position is calculated according to the normal flow (this
is called the position in normal flow). Then the box is offset relative
to its normal position. When a box B is relatively positioned, the
position of the following box is calculated as though B were not
offset.
absolute
The box's position (and possibly size) is specified with the
'left', 'right', 'top', and 'bottom' properties. These properties specify
offsets with respect to the box's containing block. Absolutely
positioned boxes are taken out of the normal flow. This means they have
no impact on the layout of later siblings. Also, though absolutely
positioned boxes have margins, they do not collapse with any other
margins.
fixed
The box's position is calculated according to the 'absolute' model,
but in addition, the box is fixed with respect to some reference. In
the case of continuous media, the box is fixed with respect to the
viewport (and doesn't move when scrolled). In the case of paged media,
the box is fixed with respect to the page, even if that page is seen
through a viewport (in the case of a print-preview, for example).
Authors may wish to specify 'fixed' in a media-dependent way. For
instance, an author may want a box to remain at the top of the viewport
on the screen, but not at the top of each printed page. The two
specifications may be separated by using an @media rule, as in:
An element is said to be positioned if its 'position'
property has a value other than 'static'. Positioned elements generate
positioned boxes, laid out according to four properties:
'top'
Value:
<length> | <percentage> | auto | inherit
Initial:
auto
Applies to:
positioned elements
Inherited:
no
Percentages:
refer to height of containing block
Media:
visual
This property specifies how far a box's top content edge is offset
below the top edge of the box's containing block.
'right'
Value:
<length> | <percentage> | auto | inherit
Initial:
auto
Applies to:
positioned elements
Inherited:
no
Percentages:
refer to width of containing block
Media:
visual
This property specifies how far a box's right content edge is offset
to the left of the right edge of the box's containing block.
'bottom'
Value:
<length> | <percentage> | auto | inherit
Initial:
auto
Applies to:
positioned elements
Inherited:
no
Percentages:
refer to height of containing block
Media:
visual
This property specifies how far a box's bottom content edge is offset
above the bottom of the box's containing block.
'left'
Value:
<length> | <percentage> | auto | inherit
Initial:
auto
Applies to:
positioned elements
Inherited:
no
Percentages:
refer to width of containing block
Media:
visual
This property specifies how far a box's left content edge is offset to
the right of the left edge of the box's containing block.
The values for the four properties have the following meanings:
<length>
The offset is a fixed distance from the reference edge.
<percentage>
The offset is a percentage of the containing block's width (for
'left' or 'right') or height (for 'top' and 'bottom'). For 'top' and
'bottom', if the height of the containing block is not specified
explicitly (i.e., it depends on content height), the percentage value
is interpreted like 'auto'.
auto
The effect of this value depends on which of related properties
have the value 'auto' as well. See the sections on the width and height
of absolutely positioned, non-replaced elements for details.
For absolutely positioned boxes, the offsets are with respect to the
box's containing block. For relatively positioned boxes, the offsets are
with respect to the outer edges of the box itself (i.e., the box is given
a position in the normal flow, then offset from that position according
to these properties).
To do:
Make
the drag code truly working for MSIE 6 in standard compliant mode
Need to sort out only
relevant variables
Make
the reset of the form reposition all images to their "static" values in
normal flow
Do a better tree of
nodes gif
Include a button to
modify margin, border, padding on html and body elements
Make
labels of the form react like Mozilla's xbl with rounded corners
Implement bottom and right
Implement auto keywords for left, top, right and bottom
Implement a pushpin in the
title of position control div to fix in the viewport the positioning
form controls div
Implement inherit keyword for left, top, right and
bottom
Implement selectable length units for left, top, right and
bottom
Implement parsable decimal values for left, top, right and
bottom
Remove
absol. and relat. optgroups
Implement 9 global javascript variables to memorize values
of each 5 movable/positionable nodes (Charles Cooke suggestion)