PositionClick to fix this element in the viewport






offsetlength unit
auto and inherit keywords accepted

Interactive page on evt.layerX/Y properties

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
How to use this interactive demo
  1. Drag and move the div (control position form) with the Position                 caption immediately at the right of the table which has the caption Position output data table. This Position output data table is immediately under this "How to use" block.
  2. Then, move the test boxes right under the control position form. You must do this by choosing the radio button Blue box, then selecting absolute or relative as position. (You must choose absolute or relative for the Blue box, otherwise this interactive demo on the evt.layerX and evt.layerY properties won't succeed.) Then you have to figure out (trials and errors) the Left and Top values for the Blue box so that it can be positioned right under your control position form. Remember that when the Blue box will first become an absolute positioned box, the page will reflow as any and every element which is absolutely positioned is taken out, removed from the normal flow. So you will have to reposition your control position form. If you chose relative, then there won't be any reflow of the page.
    The goal of all these steps is to have all 3 components (output table, position form controls and test boxes) within the same viewing area in your browser viewport so that you can view these and interact with these without having to scroll.
  3. Once the output table, position form controls and test boxes are all within your browser viewport, then play around with position, left and top values for yellow and red boxes. Move the mouse inside the test boxes. Observe that evt.layerX and evt.layerY values are no longer the same as evt.pageX and evt.pageY values. As you "mouse" inside these positioned elements, the X and Y coordinates are relative to the left/top corner of the positioned element otherwise to the left/top corner of its closest positioned containing element.
  4. Do not hesitate to try different combinations: this is where things are fun, instructive and revealing. Different combinations for the Blue - Yellow - Red test boxes. There are 5 * 5 * 5 = 125 possible combinations of position values for the 3 test boxes. If you also consider the negative, zero, positive values and auto, inherit keyword values for the Left, Top, Right and Bottom values, absolute and relative length units, then there are millions different combinations possible.
Position output data table
X mouse coordinate within the whole width of the document Netscape 6.x evt.pageX
Y mouse coordinate within the whole height of the document Netscape 6.x evt.pageY
X mouse coordinate within a positioned element otherwise within its closest positioned containing element Netscape 6.x evt.layerX
Current target element's tagname
Current target element's id
Current target's offsetParent tagname
Current target's offsetParent id
Y mouse coordinate within a positioned element otherwise within its closest positioned containing element Netscape 6.x evt.layerY

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
Absolutely positioned boxes are removed, taken out of the normal flow.

Important links:

W3C CSS2.1 technical recommendation
9. Visual formatting model
http://www.w3.org/TR/CSS21/visuren.html

W3C CSS2.1 technical recommendation
10 Visual formatting model details
http://www.w3.org/TR/CSS21/visudet.html

'position'
Value:  static | relative | absolute | fixed | inherit
Initial:  static
Applies to:  all elements, but not to generated content
Inherited:  no
Percentages:  N/A
Media:  visual

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 specifie 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 mean they have no impact on the layout of later siblings. Also, though absolutely positione 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:

Example(s):

@media screen
  H1#first { position: fixed
}
@media print
  H1#first { position: static }
}

9.3.2 Box offsets: 'top', 'right', 'bottom', 'left'

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:

MSIE6's box model when in CSS1Compat mode (standard compliant mode)
'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:

Valid HTML 4.01! CSS compliant