Table of contents
The CSS position property defines the position of an element in a document. This property works with the left, right, top, bottom and z-index properties to determine the final position of an element on a page.
There are five values the position property can take.
- STATIC :
We can define positioning of an element in CSS as static which does not renders the element in any special way, but in a normal way. Elements with positioning as static are not affected by any of the CSS Positioning properties (left, right, top and bottom).
Example:
HTML (We'll use this example throughout this article.) :
<html>
<body>
<div class="parent-element">
<div class="sibling-element">
I'm the other sibling element.
</div>
<div class="main-element">
All eyes on me. I am the main element.
</div>
<div class="sibling-element">
I'm the other sibling element.
</div>
</div>
</body>
<html>
CSS :
.main-element {
position: static;
left: 10px;
bottom: 10px;
background-color: yellow;
padding: 10px;
}
This is the result:
- RELATIVE :
Relative positioning changes the position of the HTML element relative to where it normally appears. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
CSS :
.main-element {
position: relative;
left: 10px;
bottom: 10px;
background-color: yellow;
padding: 10px;
}
This is the result:
- ABSOLUTE :
The element is positioned relative to its first positioned (not static) ancestor element. However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
Absolute positioned elements are removed from the normal flow, and can overlap elements.
In the above example we change the position of the main element to absolute position. We will also give its parent element a relative position so that it does not get positioned relative to the html element.
CSS :
.main-element {
position: absolute;
left: 10px;
bottom: 10px;
background-color: yellow;
padding: 10px;
}
.parent-element {
position: relative;
height: 100px;
padding: 10px;
background-color: #81adc8;
}
.sibling-element {
background: #f2f2f2;
padding: 10px;
border: 1px solid #81adc8;
}
This is the result:
- FIXED :
Whenever any element is defined as fixed the element is positioned relative to the browser window. it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.
A fixed element does not leave a gap in the page where it would normally have been located. In the above example we will define the height of out HTML page and then fix the main-element.
CSS :
.main-element {
position: fixed;
bottom: 10px;
left: 10px;
background-color: yellow;
padding: 10px;
}
html {
height: 800px;
}
This is the result:
As you can see the main element is fixed to a particular position.
- STICKY :
A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position then it "sticks" in place (like fixed position).
CSS :
.main-element {
position: sticky;
top: 10px;
background-color: yellow;
padding: 10px;
}
.parent-element {
position: relative;
height: 800px;
padding: 50px 10px;
background-color: #81adc8;
}
This is the result:
You see it acts as a relative element until it gets to a certain point on the screen, top: 10px and then it gets there just like a fixed element.