From MSDN :
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/position/positioning.asp
**********
If helps please rate answer.
**********
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 Microsoft 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?
Cascading Style Sheets (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 CSS. 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 with 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:0px; top:0px">
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:50px;top:30px;height:100px;width:100px">
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:0px; top:0px">
</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—probably not the effect the author 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!
Show Example
<HTML>
<HEAD><TITLE>Center the DIV</TITLE>
<SCRIPT LANGUAGE="JScript">
function doPosition() {
two.style.top = document.all.one.offsetHeight/2 -
two.offsetHeight/2;
two.style.left = document.all.one.offsetWidth/2 -
two.offsetWidth/2;
}
</SCRIPT>
</HEAD>
<BODY onload="doPosition()">
<P>Some text in the beginning.</P>
<DIV ID=one
STYLE="position:relative;top:10px;height:200px;width:200px;
background-color:green">Some text in the outer DIV
<DIV ID=two STYLE="position:absolute;left:50px;width:100px;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 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.
Show Example
<HTML>
<HEAD><TITLE>Glide the DIV</TITLE>
<SCRIPT LANGUAGE="JScript">
var action;
function StartGlide() {
Banner.style.pixelLeft =
document.body.offsetWidth;
Banner.style.visibility = "visible";
action = window.setInterval("Glide()",50);
}
function Glide() {
document.all.Banner.style.pixelLeft -= 10;
if (Banner.style.pixelLeft<=0) {
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:0px;
left:0px">
Welcome to Dynamic HTML!</DIV>
</BODY>
</HTML>
Show Me
Note Only Internet Explorer 5 or later supports dynamically changing an
element from nonpositioned to positioned.
For more ideas on how to integrate positioning with other Dynamic HTML
(DHTML) techniques, see Introduction to Filters and Transitions to learn how
to incorporate visual filter effects.
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.
Show Example
<HTML>
<HEAD><TITLE>Clip the DIV</TITLE>
</HEAD>
<BODY>
<DIV
STYLE="position:absolute;top:50px;left:50px;height:100px;width:100px;
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 the overflow attribute 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.
Show Example
<HTML>
<HEAD><TITLE>Scroll the Overflow</TITLE>
</HEAD>
<BODY>
<DIV STYLE="position:absolute;top:50px;left:50px;height:100px;width:100px;
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 the overflow attribute 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 absolutely or relatively 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:0px;left:0px">Text Over Image</P>
<IMG SRC="sample.jpg" STYLE="position:absolute;top:0px;left:0px;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.
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:50px;left:50px;height:100px;
width:100px;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:
MyDiv.style.visibility = "visible";
An element that is not visible 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
Note Input from pointing devices, such as the mouse, does not penetrate
through overlapping elements even if the elements are not visible. This is
also true for positioned elements with a negative z-index unless:
The parent is a scrolling container (that is, its overflow property is set
to auto or scroll).
The parent is positioned (that is, its position property is set to absolute
or relative).
