codescracker


css

CSS Position



« Previous Tutorial Next Tutorial »


CSS provides a property, position, which controls the position of elements with respect to the normal flow of the content on a Web page.

You can apply the position property on any HTML element, such as P, DIV, TABLE, FORM, and TEXTAREA.

The syntax to use the position property is given as follows:

position: [value];

The position property takes values described in the table given below:

Value Description
relative Specifies relative position of an element with respect to the normal flow the content
absolute Specifies the position of a block element with respect to the normal flow of the content
fixed Fixes the position of an element with respect to the normal flow of the content
static Specifies the normal position of an element
inherit Specifies that an element uses the same settings of position as of its parent element

The following code fragment shows how to use the position property:

p { position: fixed; }

CSS also provides some properties that specify the offset position of an element with respect to the normal flow of the content of a Web page. These properties are described in the following table:

Property Description
top Offsets an element in the top direction of a Web page
bottom Offsets an element in the bottom direction of a Web page
left Offsets an element in the left direction of a Web page
right Offsets an element in the right direction of a Web page

The following code fragment shows how to set the offset positions for an element:

p { position: fixed; top: 10px; right: 5px; }

In the preceding code fragment, the offset position of the P element is top-right and the position is fixed with respect to the normal flow of the Web page content.

Let's explore more about the positioning of an element in the following sections:

CSS Fixed Positioning

As discussed, the fixed value of the position property is used to set the fixed position for an element. It keeps an element fixed with respect to the remaining content of the Web page.

An element assigned with fixed positioning does not change its position when the Web page is scrolled. This type of positioning is often used when a fixed header or footer needs to be specified in each page of a website irrespective of the scrolling of the page. This is also used to create a frame whose header and side bar are kept constant and the remaining content keeps changing on scrolling.

The following code fragment shows how to fix the position of the P element:

<style type="text/css">
	p { position: fixed; bottom: 10px; right: 5px; }
</style>

CSS Fixed Positioning Example

Here is an example on CSS fixed positioning:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Position Example</title>
	<style>
		p.fix_pos { position: fixed; top: 30px; right: 5px; color: blue; }
	</style>
</head>
<body>

<p>CSS Position Tutorial</p><p>CSS Position Example</p>
<p>CSS Position Test</p><p>CSS Position Exercise</p>
<p class="fix_pos">This is Positioned</p>

</body>
</html>

Here is the sample output produced by the above CSS position example code:

css fixed positioning

Note - IE7 and IE8 support the fixed value only if a !DOCTYPE is specified.

Fixed positioned elements are removed from the normal flow. The document and other elements behave like the fixed positioned element does not exist.

Fixed positioned elements can overlap the other elements.

CSS Static Positioning

HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the web page.

Static positioned elements are not affected by the top, bottom, left, and right properties.

CSS Absolute Positioning

The absolute value of the position property is used to set the absolute position of an element with respect to the content of its parent element.

An absolutely positioned element and its parent element are placed independently.

The layout of each absolutely positioned element is independent of other elements. By default, an absolutely positioned element is placed just above (in z-space coordinate) its parent element.

The following code fragment shows how to set absolute position using CSS position property:

<style type="text/css">
	.absolute { position: absolute; left: 100px; top: 150px; }
	.absolute2 { position: absolute; left: 10px; top: 50px; }
</style>

Note - Using CSS, you can also overlap the content of two elements. To overlap two elements, you should specify the position of one element as absolute.

CSS provides the z-index property to overlap the content of two elements. This property specifies a stack order, that positions one element over another.

The following code fragments overlaps the content of the P element over the content of the parent element:

<style type="text/css">
	p { position: absolute; left: 0px; top: 0px; z-index: -1; }
</style>

CSS Absolute Positioning Example

Here is an example on CSS absolute positioning:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Position Example</title>
	<style>
		p#abs_pos { position: absolute; left: 150px; top: 150px; }
	</style>
</head>
<body>

<p id="abs_pos">This paragraph has an absolute position.</p>
<p>With absolute positioning, an element can be placed anywhere on
 a web page.</p>

</body>
</html>

Here is the sample output produced by the above CSS absolute position example code:

css absolute positioning

CSS Relative Positioning

The relative value of the position property is used to set the relative position of an element with respect to the content of its parent element.

This type of positioning allows an element to retain its natural formatting.

Relative positioning provides the following advantages :

Relative positioning defines a new coordinate system for child elements, with the original located at the position where the first child element is rendered.

The following code fragment shows how to set relative position using the CSS position property:

<style type="text/css">
	.pos_left { position: relative; left: -20px; }
	.pos_right { position: relative; left:20px; }
</style>

CSS Relative Positioning Example

Here is an example on CSS relative positioning:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Position Example</title>
	<style>
		p.left_pos { position: relative; left: -40px; }
		p.right_pos { position: relative; left: 40px; }
	</style>
</head>
<body>

<p>Paragraph without positioned.</p>
<p class="left_pos">This paragraph is moved left according to its normal position.</p>
<p class="right_pos">This paragraph is moved right according to its normal position.</p>
<p>Relative positioning moves an element RELATIVE to its original position.</p>

</body>
</html>

Here is the sample output of the above CSS relative position example code:

css relative positioning

The content of relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow.

Note - Relatively positioned elements are often used as container blocks for absolutely positioned elements.

CSS Overlapping of Elements

When elements are positioned outside the normal flow, they can overlap the other elements. Let's look at the following example demonstrates how to overlap elements using CSS:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Position Example</title>
	<style>
		img { position: absolute; left: 0px; top: 0px; z-index: -1; }
	</style>
</head>
<body>

<h2>This is a heading</h2>
<img src="waterfall.jpg" width="120" height="160">
<p>Because the image has a z-index of -1, so it will be placed
 behind the text.</p>

</body>
</html>

Here is the sample output of the above CSS overlapping elements example code:

css overlapping elements

« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test