|
Set an Element's Position
By Stephen Bucaro
Use the position property to position an html element. An element may be positioned
relative to the other elements in its containing element:
position:relative;
Or an element may be positioned absolute within its containing element:
position:absolute;
After setting the type of positioning, use the left and top properties to set
the position of the element.
Text in a Span Positioned Relative
The span containing the text above is positioned relative with its left side 10 pixels from the
left side of its containing element and its top side 10 pixels from the top of its containing element.
<span style="position:relative; left:10px; top:10px; color:#0000ff">Text in a Span Positioned Relative</span>
Some text before the span element. Text in a Span Positioned Relative Some text after the span element.
The span containing the text above is also positioned relative with left:10px, top:10px.
Note how relative positioning allows the span to flow into position with the text before and
after the span element.
Some text before the span element. Text in a Span Positioned Absolute Some text after the span element.
The span containing the text above is positioned absolute with left:10px, top:10px.
Note how absolute positioning places the span at the exact position defined within its containing
element, ignoring other elements that follow the default flow pattern.
Some text before the span element. <span style="position:absolute; left:10px; top:10px; color:#0000ff; z-index:0;" >Text in a Span Positioned Absolute</span > Some text after the span element.
 Note: The containing element
for an absolutely positioned element is its closest, positioned ancestor. For example, you might define
position:absolute for an element in order to possiton it at an exact location inside its containing
block. Then define position:relative for a containing element so that it follows normal flow in the
webpage layout. If you don't explicity define a position type, either position:relative or
position:absolute for anabsolute positioned element's parent element, the absolute positioned element
will be positioned absolute relative to the body of the webpage.
Use width, and height
with or without left and top to set the size of an element.
| 
Free Downloads