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:

<IMG SRC="sample.gif" STYLE="position:absolute; left:0; top:0">

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.

<DIV STYLE="position:relative;left:50;top:30;height:100;width:100">
        Some text inside the DIV that will be hidden by the image because the image will be positioned over this flowing text.
    <IMG SRC="sample.gif" STYLE="position:absolute; left:0; top:0">
</DIV>

This example places the IMG element at the upper-left corner of the DIV element, which is itself positioned on the page.

Setting an absolute position pulls the element out of the "flow" of the document and positions it regardless 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 to specify the order in which elements are stacked at the same location.

The contents of a positioned element flow within the given dimensions as default HTML would flow. For instance, text would wrap normally based on the width of the element, and various inline elements contained within the positioned elements will be placed next to each other in source order according to the constraints of size and shape of the "container" (that is, the positioned element).

Relative Positioning

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

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!

<HTML>
<HEAD><TITLE>Center the DIV</TITLE>
<SCRIPT LANGUAGE="JScript">
function doPosition() {
document.all.two.style.top = document.all.one.offsetHeight/2 - 
document.all.two.offsetHeight/2;
document.all.two.style.left = document.all.one.offsetWidth/2 - 
document.all.two.offsetWidth/2;
}
</SCRIPT>
</HEAD>
<BODY onload="doPosition()">
<P>Some text in the beginning.</P>
<DIV ID=one STYLE="position:relative; top:10;height:200;width:200;background-color:green">
Some text in the outer DIV
<DIV ID=two STYLE="position:absolute;left:50;width:100;color:red;border:red 2px solid">
text in the inner DIV - color should be red
</DIV>
</DIV>
</BODY>
</HTML>

Show Me

In the example above, the outer DIV "flows" with the contents of the document that precedes it, meaning it is positioned 10 pixels immediately after the first paragraph. The inner DIV has an initial absolute position, but this position is modified by the script function "doPosition" when the document is loaded. The offsetWidth and offsetHeight properties are used to calculate the new absolute position for an element. In the example above, you can also use the posLeft or pixelLeft property to center the images. These properties give alternate access to the left property, letting you set the position using a floating point number or an integer. There are similar pos* and pixel* properties that provide alternate access to the top, width, and height properties.

Combining Dynamic Positioning Techniques

The previous example can be expanded to manipulate multiple items on the page. Or, to animate this script, you might rework the scripting function on the "onload" of the document to have the inner piece of text "fly in" from offscreen. This function could be based on a timer that would move the inner DIV from an initial top and left coordinate somewhere off the visible portion of the page, and, over a given amount of time, move it to a position that would be in the center of the outer DIV.

The following example makes the DIV element visible and animates the content to glide across the screen. By setting an interval using the setInterval method on the window object, you can move one or more elements each time the interval elapses.

<HTML>
<HEAD><TITLE>Glide the DIV</TITLE>
<SCRIPT LANGUAGE="JScript">
var action;
function StartGlide() {
    document.all.Banner.style.pixelLeft = 
        document.body.offsetWidth;
    document.all.Banner.style.visibility = "visible";
    action = window.setInterval("Glide()",50);
}
function Glide() {
    document.all.Banner.style.pixelLeft -= 10;
    if (document.all.Banner.style.pixelLeft<=0) {
        document.all.Banner.style.pixelLeft=0;
        window.clearInterval(action);
    }
}
</SCRIPT>
</HEAD>
<BODY onload="StartGlide()">
<P>With dynamic positioning, you can move elements and their content 
anywhere in the document even
after the document has loaded!
<DIV ID="Banner" STYLE="visibility:hidden;position:absolute;top:0; left:0">Welcome to Dynamic HTML!</DIV>
</BODY>
</HTML>

Show Me

Note that you cannot dynamically change an element from nonpositioned to positioned. The position attribute should be set in the HTML source, as setting the position attribute in script will not work with Internet Explorer 4.0.

For more ideas on how to integrate positioning with other DHTML techniques, check out Filters and Transitions to learn how to incorporate visual filter affects.

Controlling Content Visibility

In addition to controlling where on the page the element is positioned, the content of positioned elements can be restricted from the user's view in several ways. The display and visibility attributes control whether the element appears on the screen at all, and the clip and overflow attributes control how much of the content the user can see. As mentioned previously, authors can also control the visibility of overlapping elements by manipulating the z-index ordering.

Clipping Regions and Overflow

You can set a clipping region for a positioned element by using the clip attribute. The clipping region defines a rectangle within which the element is visible. Any portion of the element that extends outside the clipping region is "clipped," that is, not displayed. The clipping region does not alter the HTML, but simply changes how the element is displayed.

For example, the following document uses clip to define a clipping region for the absolutely positioned DIV. The region, a 30-by-30 pixel square, displays only a portion of the text; the rest is clipped from view.

<HTML>
<HEAD><TITLE>Clip the DIV</TITLE>
</HEAD>
<BODY>
<DIV
STYLE="position:absolute;top:50;left:50;height:100;width:100;clip:rect(0 30 30 0);background-color:green">
some content some content some content some content some content
some content some content some content some content some content
some content some content some content some content some content
some content some content 
</DIV>
</BODY>
</HTML>

Show Me

Be careful when you define a clipping region—the parameter order (top, right, bottom, left) is important. For example, setting clip:rect to (0 0 30 30) causes the region not to display because the top and right have been defined as zero. The correct definition for a 30-by-30 clipping region based off the top left corner of the positioned object is to set clip:rect to (0 30 30 0).

You can change the clipping region dynamically by using the clip property, as in the following example.

document.all.MyDiv.style.clip = "rect(0 50 75 0)";

Overflow occurs when there is more content in a positioned element than can fit within the area defined for it. By default, any extra content is displayed but flows beyond the end of the area and therefore may overlap other elements in the document. You can prevent this overflow by using the "overflow" attribute to either hide the overflow or enable scroll bars to let the user view it by scrolling.

For example, the following document uses "overflow" to apply scroll bars. Only the portion of the text that fits within the 100-by-100 area is initially displayed, but the user can scroll the rest into view by using the scroll bars.

<HTML>
<HEAD><TITLE>Scroll the Overflow</TITLE>
</HEAD>
<BODY>
<DIV STYLE="position:absolute;top:50;left:50;height:100;width:100;overflow:scroll">
some content some content some content some content some content
some content some content some content some content some content
some content some content some content some content some content
some content some content 
</DIV>
</BODY>
</HTML>

Show Me

You can hide any overflow by setting "overflow" to "hidden". Similarly, you can let the overflow flow beyond the end of the area by setting it to "visible".

You can change the overflow dynamically by using the overflow property, as in the following example.

if (document.all.MyDiv.style.overflow != "scroll")
    document.all.MyDiv.style.overflow = "scroll";

Z-Index Ordering

The z-index specifies in what order elements should be drawn when two or more elements occupy the same area. Setting the z-index is useful whenever you have absolute or relative positioned elements that overlap other elements in the document.

You set the z-index by using the z-index attribute. Setting this to a positive value causes the element to be stacked on top of other elements; negative values cause it to be stacked below. The following document uses z-index to stack text on top of the image.

<HTML>
<HEAD><TITLE>Stack the Image</TITLE>
</HEAD>
<BODY>
<P STYLE="position:absolute; top:0; left:0">Text Over Image</P>
<IMG SRC="sample.jpg" STYLE="position:absolute; top:0; left:0; z-index:-1">
</BODY>
</HTML>

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.

<p> A paragraph above the DIV element</p> 
<DIV ID=MyDiv STYLE="position:absolute;top:50;left:50;height:100;width:100;visibility:hidden">
<p> A paragraph below the DIV element</p>

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.