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. 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.
The superscript in this namexyz 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 position See Also top, left, height, width, z-index -------------------------------------------------------------------------------- position -------------------------------------------------------------------------------- Description Retrieves the type of positioning used for the element. Syntax object.style.position Remarks The default is static, which means there is no special positioning, and the element obeys the layout rules of HTML. 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. Be sure to note the Applies To listings for elements that can be relatively and absolutely positioned. See Positioning for an overview on how to use dynamic positioning. The property has read-only permission. Applies To HTML Tags For position:absolute APPLET, DIV, EMBED, FIELDSET, HR, IFRAME, IMG, INPUT, INPUT type=button, OBJECT, MARQUEE, SELECT, SPAN, TABLE, TEXTAREA 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, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, 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 Scripting style CSS Attribute position -------------------------------------------------------------------------------- CORSO POSIZIONAMENTO DINAMICO DHTML ----------------------------------- Contents Index Topic Contents Previous Topic: Finding Text in the Document Next Topic: Filters and Transitions Positioning Microsoft® Internet Explorer 4.0 supports the ability to position HTML elements in x- and y-coordinates, as well as overlap elements in planes along the z-axis, which extends toward and away from the viewer in a Web document. This capability allows authors to place elements—images, controls, or text—exactly where they want on the page. By using scripts to manipulate the position coordinates and other dynamic styles, authors can move elements around a page, creating animated effects. The combination of dynamic styles, positioning, transparent ActiveX™ Controls, and transparent images presents authors with a rich set of animation options. What Is Positioning? Absolute Positioning Relative Positioning Positioning Considerations Controlling Content Visibility Element Visibility What Is Positioning? CSS Positioning defines the placement of elements on a page, and is an extension of cascading style sheets as specified in the W3C Working Draft on Positioning HTML with Cascading Style Sheets. By default, elements "flow" one after another in the same order as they appear in the HTML source, with each element having a size and position that depends on the type of element, the contents of the element, and the display context for the element as it will render on the page. This default "flow" model for HTML layout doesn't provide the author a high level of control over the placement of elements on the page. By applying a small set of CSS attributes to the elements that are defined for the page, you can control the precise position of elements by giving exact coordinates, or specifying placement relative to the position of other objects on the page. Just like any other HTML or CSS attribute, the CSS attributes used to control an element's position are available for scripting. The position of these elements on the page can thus be dynamically changed with script. This is very powerful! The position of these elements can be recalculated and redrawn after the document is loaded without needing to reload the page from the server. Controlling the position of an element uses several other layout control techniques. These include controlling the display of the object—that is, whether or not the element is displayed on the page, and how much of the element can be viewed by the user. There are two ways to position an element in x- and y-coordinates. The type of positioning to use depends on the layout of the content and the purpose of the document. Absolute positioning means that the element is precisely placed relative to the parent coordinate system, regardless of any other content. Relative positioning places the item with respect to other elements on the page. Relative positioning depends on the default flow of the document, and reflows content should the user resize the browser. Absolute Positioning 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. For example, to place an image at the top left corner of the document, you set the attributes to 0 as follows: This positions the image within the border of the BODY element. Remember, there is a default border on the BODY, so if no border is desired, set the border of the BODY to 0 to position the image at the 0,0 coordinates of the client area. To see how a positioned parent affects the absolute position, consider the following example.
The superscript in this namexyz is "xyz". Should the user resize the window, the "xyz" still appears three pixels above the natural baseline of the text. You can set the left attribute in a similar way to change the horizontal spacing between "name" and "xyz". If the contents of the SPAN were absolutely positioned, the "xyz" would be placed relative to the BODY (or the next positioned element in the hierarchy), and the "xyz" would be barely visible at the upper corner of the client area—not the effect the author probably intended! 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. It is quite possible that relatively positioned elements will overlap with other objects and elements on the page. As with absolute positioning, you can use the z-index attribute to set the z-index of the positioned element relative to other elements that might occupy the same area. By default, a positioned element always has a higher z-coordinate than its parent element so that it will always be on top of its parent element. Positioning Considerations The type of positioning to use depends on the layout of the content and the purpose of the document. Relative positioning depends on the default flow of the document and will reflow content should the user resize the browser. However, absolute positioning gives you the control to precisely place images and text no matter what the user does to the display. Here is an example of nesting an absolutely positioned element within a relatively positioned element. The desired effect is to center text in a rectangle. In the past, you might build tables and use attributes to center the content inside a table cell. However, this layout restricts you to a static table. Using positioning, this content can be worked into a larger layout, and then you can add scripting that might, for instance, have each of these elements fall into place from somewhere outside the document as the user loads the page!
Some text in the beginning.
With dynamic positioning, you can move elements and their content anywhere in the document even after the document has loaded!
Text Over Image
Show Me The element with the greatest z-index is always placed at the very top of the stack, and the element with the least z-index at the very bottom. If two elements have the same z-index, their source order determines the stacking—the last element is stacked highest. You can change the z-index dynamically by setting the zIndex property, as in the following example. document.all.MyImg.style.zIndex = 2; In general, all elements are "windowless" and will participate in z-order overlapping. However, some objects are "windowed". ActiveX Controls that have not been specifically written to be windowless will not overlap with other objects. IFRAME elements represent a window object, and window objects do not participate in z-order. Another exception in Internet Explorer 4.0 is the SELECT element. Element Visibility The visibility of a positioned element determines whether the user can see the element. Visibility is useful for temporarily hiding an element, such as when time is needed to calculate its position or when carrying out simple transition effects. You can set the visibility by using the visibility attribute. The following example uses the attribute to make the DIV element invisible.A paragraph above the DIV element
A paragraph below the DIV element
You can set the visibility of an element from script by using the visibility property. For example, assume that the DIV in the previous example is loaded. Initially, it is invisible, but you can change this to visible by using the following: document.all.MyDiv.style.visibility = "visible"; An invisible element continues to affect the document layout; that is, the space that the element would occupy remains in the document even though it is empty. This is unlike the display attribute, which does not reserve space. The following sample demonstrates the difference between visibility and display. Show Me -------------------------------------------------------------------------------- Top of Page © 1997 Microsoft Corporation. All rights reserved. Terms of Use.