CSS Tutorial: Position absolute, relative, fixed and sticky in CSS | Web Development Tutorials #25

This tutorial begins where the #24 tutorial left off. In this tutorial, we will discuss the position property of CSS. With the help of CSS, you can put your HTML elements at the position of your choice. After going through this tutorial, you will master the differences in the positioning of the elements. So, without wasting any time, let’s start discussing the CSS positioning-related properties.

Types Of Position Property :

There are five types of position property :

• static
• relative
• absolute
• fixed
• sticky

position: static;

• It is the default position of HTML elements.

position: relative;

• It is used when we need to position an HTML element relative to its normal position.
• We can set the top, right, bottom, and left properties that will cause the element to adjust away from the normal position.

Example: We have used the below CSS to design four boxes as shown in the given image