Stylus Studio XML Editor

Table of contents

Appendices

7.5 Common Absolute Position Properties

Common Absolute Position Properties

absolute-position[top]

"absolute-position"

A Property Derived from a CSS2 Property.

0prop-summary lefttoplefttoplefttoplefttoplefttoplefttop
11lefttopValue: 11lefttopauto | absolute | fixed | inherit
11lefttopInitial: 11lefttopauto
11lefttopApplies to: 11lefttopfo:block-container
11lefttopInherited: 11lefttopno
11lefttopPercentages: 11lefttopN/A
11lefttopMedia: 11lefttopvisual

Values have the following meanings:

auto

There is no absolute-positioning constraint. Positioning is in accordance with the relative-position property.

absolute

The area's position (and possibly size) is specified with the "left", "right", "top", and "bottom" properties. These properties specify offsets with respect to the area's containing area. Absolutely positioned areas are taken out of the normal flow. This means they have no impact on the layout of later siblings. Also, though absolutely positioned areas have margins, they do not collapse with any other margins.

fixed

The area's position is calculated according to the "absolute" model, but in addition, the area is fixed with respect to some reference. In the case of continuous media, the area is fixed with respect to the viewport (and doesn't move when scrolled). In the case of paged media, the area 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 an area to remain at the top of the viewport on the screen, but not at the top of each printed page.

The following additional restrictions apply for paged presentations:

  • Only objects with absolute-position="auto" may have page/column breaks.

    For other values any keep and break properties are ignored.

  • The area generated is a descendant of the page-area where the first area from the object would have been placed had the object had absolute-position="auto" specified.

top[top]

"top"

CSS2 Definition: as amended by [http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html#x12]

0prop-summary lefttoplefttoplefttoplefttoplefttoplefttop
11lefttopValue: 11lefttop<length> | <percentage> | auto | inherit
11lefttopInitial: 11lefttopauto
11lefttopApplies to: 11lefttoppositioned elements
11lefttopInherited: 11lefttopno
11lefttopPercentages: 11lefttoprefer to height of containing block
11lefttopMedia: 11lefttopvisual

CSS2 Reference: [ "top" property ] http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-top

This property specifies how far a box's top margin edge is offset below the top edge of the box's containing block.

XSL modifications to the CSS definition:

See definition of property left ( [left] ).

right[top]

"right"

CSS2 Definition: as amended by [http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html#x12]

0prop-summary lefttoplefttoplefttoplefttoplefttoplefttop
11lefttopValue: 11lefttop<length> | <percentage> | auto | inherit
11lefttopInitial: 11lefttopauto
11lefttopApplies to: 11lefttoppositioned elements
11lefttopInherited: 11lefttopno
11lefttopPercentages: 11lefttoprefer to width of containing block
11lefttopMedia: 11lefttopvisual

CSS2 Reference: [ "right" property ] http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-right

This property specifies how far a box's right margin edge is offset to the left of the right edge of the box's containing block.

XSL modifications to the CSS definition:

See definition of property left ( [left] ).

bottom[top]

"bottom"

CSS2 Definition: as amended by [http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html#x12]

0prop-summary lefttoplefttoplefttoplefttoplefttoplefttop
11lefttopValue: 11lefttop<length> | <percentage> | auto | inherit
11lefttopInitial: 11lefttopauto
11lefttopApplies to: 11lefttoppositioned elements
11lefttopInherited: 11lefttopno
11lefttopPercentages: 11lefttoprefer to height of containing block
11lefttopMedia: 11lefttopvisual

CSS2 Reference: [ "bottom" property ] http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-bottom

This property specifies how far a box's bottom margin edge is offset above the bottom edge of the box's containing block.

XSL modifications to the CSS definition:

See definition of property left ( [left] ).

left[top]

"left"

CSS2 Definition: as amended by [http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html#x12]

0prop-summary lefttoplefttoplefttoplefttoplefttoplefttop
11lefttopValue: 11lefttop<length> | <percentage> | auto | inherit
11lefttopInitial: 11lefttopauto
11lefttopApplies to: 11lefttoppositioned elements
11lefttopInherited: 11lefttopno
11lefttopPercentages: 11lefttoprefer to width of containing block
11lefttopMedia: 11lefttopvisual

CSS2 Reference: [ "left" property ] http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-left

This property specifies how far a box's left margin edge is offset to the right of the left edge of the box's containing block.

The values of the four (position offset) properties have the following meanings:

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.

<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".

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).

XSL modifications to the CSS definition:

These properties set the position of the content-rectangle of the associated area.

If both "left" and "right" have a value other than "auto", then if the "width" is "auto" the width of the content-rectangle is overridden; else the geometry is overconstrained and is resolved in accordance with [overcons_geom] . Similarly, if both "top" and "bottom" have a value other than "auto", then if the "height" is "auto" the height of the content-rectangle is overridden; else the geometry is overconstrained and is resolved in accordance with [overcons_geom] .