Contents
Previous Topic: page-break-before
Next Topic: text-align
| | |
| ||
| ||
position
Description
Specifies the type of positioning for an element. The initial state is static, which means no special positioning and simply obeys the layout rules of HTML.
Syntax
{ position: absolute | relative | static}
Remarks
An absolutely positioned element is always relative to either the next positioned parent or, if there isn't one, the BODY by default. Values for left and top are relative to the upper-left corner of the next positioned element in the hierarchy.
This attribute is not inherited.
Examples
To place an image at the top left corner of the document, set the attributes to 0.
<IMG SRC="sample.gif" STYLE="position:absolute; left:0; top:0">Setting an absolute position pulls the element out of the "flow" of the document and positions it irrespective of the layout of surrounding elements. If other elements already occupy the given position, they do not affect the positioned element, nor does the positioned element affect them. Instead, all elements are drawn at the same place, causing the objects to overlap. You can control this overlap by using the z-index attribute.
Setting the CSS position attribute to relative places the element in the natural HTML flow of the document but offsets the position of the element based on the preceding content. For example, placing a piece of text within a paragraph with relative positioning will render the text relative to the text in the paragraph that precedes it.
<p>The superscript in this name<SPAN STYLE="position: relative; top:-3px">xyz</SPAN> is "xyz".Text and elements that follow a relatively positioned element occupy their own space and do not overlap the natural space for the positioned element. Contrast this with an absolutely positioned element, where subsequent text and elements occupy what would have been the natural space for the positioned element before the positioned element was pulled out of the flow.
See Positioning for an overview on how to use dynamic positioning.
Be sure to note the Applies To listings for elements that can be relatively and absolutely positioned.
Applies To
For position:absolute
TABLE, INPUT, SELECT, TEXTAREA, INPUT type=button, DIV, SPAN, OBJECT, APPLET, EMBED, IFRAME, IMG, HR, MARQUEE, FIELDSET
For position:relative
A, ADDRESS, APPLET, B, BIG, BLOCKQUOTE, CENTER, CITE, CODE, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, I, IFRAME, IMG, INPUT, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OBJECT, OL, P, PRE, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TEXTAREA, TT, U, UL, VAR, XMP, INPUT type=button, INPUT type=file, INPUT type=reset, INPUT type=submit, INPUT type=text, INPUT type=checkbox, INPUT type=radio, INPUT type=image
Scripting Property
See Also
Top of Page
© 1997 Microsoft Corporation. All rights reserved. Terms of Use.