CSS Positioning – CSITQuestions

The CSS positioning properties allow you to specify the position of an element (element’s left, right, top, and bottom position). It also allows you to set the shape of an element, place an element behind another, and to specify what should happen when an element’s content is too big to fit in a specified area.

Positioning Properties

Property	Description	Values	IE	F	N
bottom	Sets how far the bottom edge of an element is above/below the bottom edge of the parent element	auto % length	5	1	6
clip	Sets the shape of an element. The element is clipped into this shape, and displayed	shape auto	4	1	6
left	Sets how far the left edge of an element is to the right/left of the left edge of the parent element	auto % length	4	1	4
overflow	Sets what happens if the content of an element overflow its area	visible hidden scroll auto	4	1	6
position	Places an element in a static, relative, absolute or fixed position	static relative absolute fixed	4	1	4
right	Sets how far the right edge of an element is to the left/right of the right edge of the parent element	auto % length	5	1	6
top	Sets how far the top edge of an element is above/below the top edge of the parent element	auto % length	4	1	4
vertical-align	Sets the vertical alignment of an element	baseline sub super top text-top middle bottom text-bottom length %	4	1	4
z-index	Sets the stack order of an element	auto number	4	1	6

CSS Relative Positioning

The following CSS code example shows you how to position an element relative to its normal position.

<html>
<head>
<style type=”text/css”>
h1.left
{
position:relative;
left:-30px;
}
h1.right
{
position:relative;
left:30px;
}
</style>
</head>
<body>
<h1>
This heading is in the normal default position.
</h1>
<h1 class=”left”>
This heading is moved 15 pixels to the left of its normal default position.
</h1>
<h1 class=”right”>
This heading is moved 60 pixels to the right of its normal default position.
</h1>
<p>
Relative positioning moves an element RELATIVE to its original position.
</p>
<p>
The style “left:-30px” subtracts 30 pixels from the element’s original left position.
</p>
<p>
The style “left:30px” adds 30 pixels to the element’s original left position.
</p>
</body></html>

Click on example to view the page produced by above code.

CSS Absolute Positioning

The following CSS code example shows you how to position an element using an absolute value.

<html>
<head>
<style type=”text/css”>
h1.absolutepositioning
{
position:absolute;
left:50px;
top:50px
}
h1.absolutepositioning2
{
position:absolute;
left:200px;
top:200px
}
</style>
</head>
<body>
<h1 class=”absolutepositioning”>
Absolute positioning was used to place this heading 50px from the left of the page and 50px from the top of the page.
</h1>
<h1 class=”absolutepositioning2″>
Absolute positioning was used to place this heading 200px from the left of the page and 200px from the top of the page.
</h1>
<p>
Absolute positioning was used to place both of the headings below.
</p>
</body>
</html>