Home >>CSS Tutorial >CSS Position
CSS Position
CSS Position
The CSS position property is used to place an element behind another. You can position an element using the property static, relative, absolute, fixed. You can also used CSS position for getting effects like animation effect on image or text. After setting positioning property you can position an element using top, bottom, right and left.
CSS Position property
These are the following values to positioning an element:
- Relative Positioning
- Fixed Positioning
- Static Positioning
- Absolute Positioning
1. Relative Positioning
When we set relative position for an element, elements positioned to its normal flow. You can also use a negative value to positioning an element left, right, top, bottom.
Example:-
h1 {
position: relative;
border: 3px solid blue;
left: 40px;
}
Let's take an Example of Relative position:
<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
position: relative;
left: 40px;
border: 2px solid blue;
}
</style>
</head>
<body>
<h2>position: relative;</h2>
<p>An element with position: relative; is positioned relative elments to its normal flow. </p>
<div class="relative">
This element contains position relative property.
</div>
</body>
</html>
position: relative;
An element with position: relative; is positioned relative elments to its normal flow.
2. Fixed Positioning
When we set fixed position for an element it always stays in the same place even if the page is scrolled. The top, bottom, right, and left properties are used to position the element. In fixed positioning you can also use a negative value to fix an element.
Example:-
img {
position: fixed;
right: 0;
top: 50%;
border: 3px solid red;
}
Let's take an example of Fixed positioning:
<!DOCTYPE html>
<html>
<head>
<style>
div.fixed {
position: fixed;
bottom: 0;
top: 50;
right:5px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: fixed;</h2>
<p>An element with position: fixed; it always stays in the same place even if the page is scrolled.</p>
<p>An element with position: fixed; it always stays in the same place even if the page is scrolled.</p>
<p>An element with position: fixed; it always stays in the same place even if the page is scrolled.</p>
<p>An element with position: fixed; it always stays in the same place even if the page is scrolled.</p>
<p>An element with position: fixed; it always stays in the same place even if the page is scrolled.</p>
<p>An element with position: fixed; it always stays in the same place even if the page is scrolled.</p>
<p>An element with position: fixed; it always stays in the same place even if the page is scrolled.</p>
<p>An element with position: fixed; it always stays in the same place even if the page is scrolled.</p>
<p>An element with position: fixed; it always stays in the same place even if the page is scrolled.</p>
<p>An element with position: fixed; it always stays in the same place even if the page is scrolled.</p>
<p>An element with position: fixed; it always stays in the same place even if the page is scrolled.</p>
<p>An element with position: fixed; it always stays in the same place even if the page is scrolled.</p>
<p>An element with position: fixed; it always stays in the same place even if the page is scrolled.</p>
<p>An element with position: fixed; it always stays in the same place even if the page is scrolled.</p>
<div class="fixed">
<img src="girl.jpg" alt="girl-img">
</div>
</body>
</html>
position: fixed;
An element with position: fixed; it always stays in the same place even if the page is scrolled.
An element with position: fixed; it always stays in the same place even if the page is scrolled.
An element with position: fixed; it always stays in the same place even if the page is scrolled.
An element with position: fixed; it always stays in the same place even if the page is scrolled.
An element with position: fixed; it always stays in the same place even if the page is scrolled.
An element with position: fixed; it always stays in the same place even if the page is scrolled.
An element with position: fixed; it always stays in the same place even if the page is scrolled.
An element with position: fixed; it always stays in the same place even if the page is scrolled.
An element with position: fixed; it always stays in the same place even if the page is scrolled.
An element with position: fixed; it always stays in the same place even if the page is scrolled.
An element with position: fixed; it always stays in the same place even if the page is scrolled.
An element with position: fixed; it always stays in the same place even if the page is scrolled.
An element with position: fixed; it always stays in the same place even if the page is scrolled.
An element with position: fixed; it always stays in the same place even if the page is scrolled.
3. static Positioning
When we set static position for an element then it is not positioned in any special way, it is always positioned according to the normal flow of the page. It is not affected by position it to top, left, right, bottom.
Left, right, top and bottom property won’t work with static position.
Example:-
h1 {
position: static;
border: 5px solid red;
}
h1 {
position: static;
border: 5px solid red;
left: 50px;
}
Let's take an example of static position:
<!DOCTYPE html>
<html>
<head>
<style>
h4.static {
position: static;
border: 2px solid blue;
left: 50px;
}
</style>
</head>
<body>
<h2>position: static;</h2>
<h4 class="static">When we set static position for an element then it is not positioned in any special way, it is always positioned according to the normal flow of the page. It is not affected by position it to top, left, right, bottom.
<img src="girl.jpg">
</h4>
</body>
</html>
position: static;
When we set static position for an element then it is not positioned in any special way, it is always positioned according to the normal flow of the page. It is not affected by position it to top, left, right, bottom.
4. Absolute Positioning
When we set absolute position for an element, element is positioned to the nearest positioned ancestor. If there is no positioned ancestor then it follow the normal position according to browser.
Let's take an example of absolute positioning:
<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 2px solid blue;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 2px solid blue;
}
</style>
</head>
<body>
<h2>position: absolute;</h2>
<p>An element is set absolute position for an element, element is positioned to the nearest positioned ancestor. </p>
<div class="relative">this div element contains position: relative element
<div class="absolute">this div element contains position: absolute element</div>
</div>
</body>
</html>
position: absolute;
An element is set absolute position for an element, element is positioned to the nearest positioned ancestor.