is simple, it allows you to define where an element's box should appear relative to its normal position, or relative to a parent element, another element, or even the browser window itself.
1 CSS positioning mechanism
CSS has three basic positioning mechanisms: normal flow, floating and absolute positioning.
All boxes are positioned in the normal flow unless specifically specified. That is, the position of an element in a normal flow is determined by the element's position in (X)HTML.
2 CSS positioning properties
CSS positioning properties allow you to position elements.
Property Description
position Positions the element in a static, relative, absolute, or fixed position.
top defines the offset between the top margin border of a positioned element and the top border of its containing block.
right defines the offset between the right margin boundary of the positioned element and the right boundary of its containing block.
bottom defines the offset between the bottom margin border of the positioned element and the bottom border of its containing block.
left defines the offset between the left margin boundary of the positioned element and the left boundary of its containing block.
overflow sets what happens when an element's content overflows its area.
clip sets the shape of the element. Elements are clipped into this shape and then displayed.
vertical-align sets the vertical alignment of the element.
z-index sets the stacking order of elements.
3 position property
Value Description
absolute Generates an absolutely positioned element, positioned relative to the first parent element other than static positioning. The position of the element is specified by the "left", "top", "right" and "bottom" properties.
fixed (fixed positioning) generates absolutely positioned elements, positioned relative to the browser window.
The position of the element is specified by the "left", "top", "right" and "bottom" properties.
relative (relative positioning) Generates a relatively positioned element, positioned relative to its normal position. So "left:20" adds 20 pixels to the element's LEFT position.
static Default value. Without positioning, elements appear in normal flow (ignoring top, bottom, left, right or
4 Z-index
Z-index can be used to place one element after another.
<html>
<head>
<style type="text/css">
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1 //-1 in the bottom layer 1 or 0 (default) means the front layer
}
</style>
</head>
<body>
<h1>This is a header</h1>
<img class="x" src="/i/eg_mouse.jpg" />
<p>The default z-index is 0. Z-index -1 has lower priority. </p>
</body>
</html>
5 overflow property ()
property value description
visible default value. The content will not be trimmed and will be rendered outside the element box.
hidden content is trimmed and the rest of the content is invisible.
The scroll content will be trimmed, but the browser will display scroll bars to view the rest of the content.
auto If the content is trimmed, the browser displays scroll bars to view the rest of the content.
inherit specifies that the value of the overflow attribute should be inherited from the parent element.
<html>
<head>
<style type="text/css">
div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: hidden
}
</style>
</head>
<body>
<div>
This attribute defines what to do with content that overflows the element's content area. If the value is scroll, the user agent provides a scrolling mechanism whether it is required or not. So it's possible that the scrollbar will appear even though everything can fit in the element box. The default value is visible.
</div>
</body>
</html>
4 vertical-align property
Value Description
baseline Default. The element is placed on the baseline of the parent element.
sub Vertically aligns the subscript of the text.
super aligns the text's superscript vertically
top aligns the top of the element with the top of the tallest element in the line
text-top aligns the top of the element with the top of the parent's font
middle places the element in the middle of the parent.
bottom aligns the top of the element with the top of the lowest element in the row.
text-bottom aligns the bottom of the element with the bottom of the parent's font.
% Use the percentage value of the "line-height" property to line up this element. Negative values are allowed.
inherit specifies that the value of the vertical-align attribute should be inherited from the parent element.
<html>
<head>
<style type="text/css">
img.top {vertical-align:top}
img.bottom {vertical-align:length}
</style>
</head>
<body>
<p>
This is an image with <img class="top" border="0" src="/i/eg_cute.gif" /> inside a paragraph.
</p>
<p>
This is an image with <img class="bottom" border="0" src="/i/eg_cute.gif" /> inside a paragraph.
</p>
</body>
</html>