CSS Position Property
Normally all the HTML elements follow a default order. To manipulate the position of HTML elements inside the view-port, we can use the CSS position property.
CSS Position property defines how an HTML element is positioned inside the browser's view-port. We use top, right, bottom and left properties to determine the final position of the element.
This can be used to place an element behind another with z-index property and also useful for scripted animation effect.
Position property can take five values are listed below :
- static
- relative
- absolute
- fixed
- sticky
1. static
position: static is the default property for any element. Left, right, top, bottom and z-index properties do not affect a static positioned element. Element remained positioned according to the normal flow of the document.
HTML
<div class="parent-element">
<div class="simple-element">
Lorem Ipsum is simply dummy text
</div>
<div class="positioned-element">
I am the main <strong>positioned static</strong> element.
</div>
<div class="simple-element">
Lorem Ipsum is simply dummy text
</div>
</div>
CSS
.positioned-element {
position: static;
left: 16px;
top: 16px;
background-color: #104a65;
color: #ffffff;
padding: 16px 10px;
}
.simple-element {
padding: 16px 10px;
background-color: #ddd;
}
Here notice the left and top values have no effect on positioned sticky element
2. relative
Elements having position: relative will remain in it's normal flow of the web page. But, here the left, right, top, bottom and z-index properties affect the position of the element.
Let's replace position: static with position: relative in above example.
HTML
<div class="parent-element">
<div class="simple-element">
Lorem Ipsum is simply dummy text
</div>
<div class="positioned-element">
I am the main <strong>positioned relative</strong> element.
</div>
<div class="simple-element">
Lorem Ipsum is simply dummy text
</div>
</div>
CSS
.positioned-element {
position: relative;
left: 16px;
top: 16px;
background-color: #104a65;
color: #ffffff;
padding: 16px 10px;
}
.simple-element {
padding: 16px 10px;
background-color: #ddd;
}
Here notice that the left and top properties now affect the position of the element. Also the element remains in the normal flow of the document and the offset is applied relative to itself.
3. absolute
Element having position: absolute is positioned relative to its closest positioned parent if any. Otherwise it will be placed relative to the next parent positioned element and it's final position is defined by the top, right, bottom, and left value provided to it.
If there's no positioned parent element, it is positioned relative to the
<html>(e.g. root) element.
The element is removed from the normal document flow in this case. The other elements will behave as if that element is not in the document. No space is there for the positioned absolute element in the page layout.
Let's check our example, we change the value of position to absolute from relative. Also we will give relative position to it's parent element so that it's position not get relative to the <html> element.
HTML
<div class="parent-element">
<div class="simple-element">
Lorem Ipsum is simply dummy text
</div>
<div class="positioned-element">
I am the main <strong>positioned absolute</strong> element.
</div>
<div class="simple-element">
Lorem Ipsum is simply dummy text
</div>
</div>
CSS
.parent-element {
position: relative;
}
.positioned-element {
position: absolute;
left: 30px;
top: 30px;
background-color: #104a65;
color: #ffffff;
padding: 16px 10px;
}
.simple-element {
padding: 16px 10px;
background-color: #ddd;
}
Here notice that no space was created in the document for the positioned absolute element. Element is now positioned relative to the parent element.
4. fixed
Elements having position: fixed are somewhat similar to positioned absolute elements. They also don't take space in the document and removed from the page layout. But they always get positioned with relative to the <html> element (i.e.) the root of the document.
They always stay in same position on the screen while scrolling.
Final position of the element is determined by the values of top, right, bottom, and left.
In our example let's change the value of position to fixed from absolute.
HTML
<div class="parent-element">
<div class="simple-element">
Lorem Ipsum is simply dummy text
</div>
<div class="positioned-element">
I am the main <strong>positioned fixed</strong> element.
</div>
<div class="simple-element">
Lorem Ipsum is simply dummy text
</div>
</div>
CSS
.parent-element {
position: relative;
}
.positioned-element {
position: fixed;
left: 30px;
top: 30px;
background-color: #104a65;
color: #ffffff;
padding: 16px 10px;
}
.simple-element {
padding: 16px 10px;
background-color: #ddd;
}
4. sticky
sticky positioned elements are positioned according to the normal flow of the document, and then offset (based on the values of top, right, bottom, and left) relative to its nearest scrolling container/parent and containing block (block-level container).
Until a certain scroll point it acts like a relatively positioned element and then it acts like a fixed element.
HTML
<div class="parent-element">
<div class="simple-element">
Lorem Ipsum is simply dummy text
</div>
<div class="positioned-element">
I am the main <strong>positioned sticky</strong> element.
</div>
<div class="simple-element">
Lorem Ipsum is simply dummy text
</div>
</div>
CSS
.parent-element {
position: relative;
height: 850px;
}
.positioned-element {
position: sticky;
top: 30px;
background-color: #104a65;
color: #ffffff;
padding: 16px 10px;
}
.simple-element {
padding: 16px 10px;
background-color: #ddd;
}
Use of z-index property
HTML elements having higher value of z-index will overlap the element with a lower z-index value. This property only works on the positioned elements (relative, absolute, fixed and static). It doesn't affect the elements with position: static.
The value of
z-indexcan be set with an integer value.