CSS Position

In this tutorial we will learn about CSS Position property.

position

We use the position property to define the position of an element in the webpage.

Following are the values for the position property.

• static
• fixed
• relative
• absolute

Sample layout

In the following image we have 6 divs and we are going to change their positions.

We have the header and footer in blue.

Then we have the container in lightgray.

In side the container we have 4 more divs in orange, green, pink and yellow color.

HTML of the above layout is given below.

<div id="header">
	<p>id="header"</p>
</div>
<div id="container">
	<p>id="container"</p>
	<div id="div-1">
		<p>id="div-1"</p>
		<p>This is a sample paragraph.</p>
	</div>
	<div id="div-2">
		<p>id="div-2"</p>
		<p>This is a sample paragraph.</p>
	</div>
	<div id="div-3">
		<p>id="div-3"</p>
		<p>This is a sample paragraph.</p>
	</div>
	<div id="div-4">
		<p>id="div-4"</p>
		<p>This is a sample paragraph.</p>
	</div>
</div>
<div id="footer">
	<p>id="footer"</p>
</div>

position : static

This is the default value and every element starts with position static. It means that the element will occure at a position that it normally would.

If we want to override an previously set position of an element then we set its position property to static.

In the following example we have set the position of a div to static.

div {
	position : static;
}

position : fixed

When we want to set the position of an element with respect to the browser window (viewport) we use the fixed value for the position property.

A fixed positioned element will remain in its position even when the page scrolls. When we set the position property to fixed we have to specify the position using the top, right, bottom and left property.

In the following example we have set the position of the div (having id div-4) fixed and we have set the bottom property to 30px and right property to 30px. This means the div will be positioned bottom-right.

right : 30px means move 30 pixels (left) from the right.

bottom : 30px means move 30 pixels (upwards) from the bottom.

#div-4 {
	position : fixed;
	bottom : 30px;
	right : 30px;
}

We can see in the above image the div-4 is positioned bottom-right and out of the container div.

position : relative

If we want to place an element to a new location relative to its original location (place where it would normal occur) we set the relative value to the position property.

We can use the top, right, bottom and left property to position the element relative to its original place.

In the following example we have set the position of the div (having id div-2) to relative and we have set its property left to 30px and top to 30px.

left : 30px means move 30 pixels (right) from the left.

top : 30px means move 30 pixels (down) from the top.

#div-2 {
	position : relative;
	left : 30px;
	top : 30px;
}

We can see in the above image div-2 has moved from its original position and create an empty space. This empty space is still occupied by div-2 and hence the other divs have not moved up to take its place.

position : absolute

If we want an element to be placed at an exact position we use the absolute value.

We can use the top, right, bottom and left property to position the element exactly where we want it on the page.

In the following example we have set the position property of div-2 to absolute and set the value of top property to 30px and left property to 300px.

left : 300px means move 300 pixels (right) from the left.

top : 30px means move 30 pixels (down) from the top.

#div-2 {
	position : absolute;
	top : 30px;
	left : 300px;
}

As you can see in the above image div-2 is now places at a position 30px from top and 300px from the left and it has left its original place and hence other divs have taken its place.

position relative + absolute

We can also use the combination of the relative and absolute positioning to place elements differently. For example we can set the position property of a parent element to relative and then set the position property of the child element to absolute. This way we can position the child relative to the parent at an absolute position.

In the following example we have set the position property of the div (having id container) to relative and of div-2 to absolute and set its top property to 0px and right position to 0px.

So, div-2 will be positioned to the top-right corner inside the container div.

right : 0px means move 0 pixels (left) from the right i.e., stick to the right.

top : 0px means move 0 pixels (down) from the top i.e., stick to the top.

#container {
	position : relative;
}

#div-2 {
	position : absolute;
	top : 0;
	right : 0;
}