Positioning Elements with CSS
The position in CSS is used to specify the work of an element.
CSS has 5 different positions:
- static
- relative
- fixed
- absolute
- sticky
These positions work only if the position property is set first in CSS.
1. Static
By default, every element in CSS is positioned as static.
This has no special property, it is positioned according to the normal flow of the page.
Syntax:
.class/element/#id
{
position: static;
}
top, bottom, left, and right properties do not affect the elements which are positioned as static.
Example:
2. Relative
Relative position is used to position an element relative to its normal position.
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.
Syntax:
.class/element/#id
{
position: relative;
}
Example:
3. Fixed
The fixed position is used to position an element relative to the viewport.
This means that even when we scroll the page, the elements and contents stay in the same place.
top, right, bottom, and left properties are used to position the element.
Syntax:
.class/element/#id
{
position: fixed;
}
Example:
4. Absolute
absolute position is used to position an element relative to the nearest positioned elements.
If there are no such elements then the absolute use of the body of the page instead.
This is commonly used to remove the elements from the normal flow and overlap elements.
Syntax:
.class/element/#id
{
position: absolute;
}
Example:
5. Sticky
the sticky position is used to position an element based on the user’s scroll position.
Depending on the scroll position, a sticky element toggles between relative and fixed.
Syntax:
.class/element/#id
{
position: sticky;
}
the sticky position is not supported in Internet Explorer.
Example: