Have any confusion with understanding CSS positions

You are a Web –Developer or a Web– Designer. Are you confuse with the CSS positions property, no problem today we will try to understand this.  First of all we will talk about the CSS positions. When we create a web page of any website then the content that is placed on that web page that content will take a position which will call the CSS position. If we talk about the types of CSS positions then there are various types of CSS positions.

Types of CSS Positions

Let see that how much types of CSS positions. There are various types of CSS positions which are as follows –

•        Static
•         Relative
•         Absolute
•         Fixed
•         Sticky

Mainly CSS positions are of 5 types. These were the five types of CSS positions. Let see how they work.

Read Also - Styling Input type file

CSS Static Position

This is the first type of CSS position or in other words, we can say that static is the default position of any content on the web page. If we don’t declare any position to the content or any section on the web page, then it will take the default CSS position that is the Static position.

CSS Relative Position

Relative is the second type of CSS position. If we want to place the element in the new position in comparison to its normal position, then we will use the CSS relative position. That means we can place an element to the new position with its left or right relation by using the Relative position. For example –

If there is any div with class name  Digitfeast like that –

<div class=”digitfeast”>

            content

</div>

Then the CSS for that div will be :-

.digitfeast{

            Position:relative;

            Width:100px;

            Height:100px;

            Left:50px;

            Top:50px;

}

After this CSS the div digitfeast will place 50px from left and 50px from top. And when we use relative position for any element then it will not affect the other element on the web page.

CSS Absolute Position

CSS absolute the position plays a very important role. When we assign the absolute position to any element then it will be relative to its parent element. Like that if there are two boxes on a web page. The first one is Box-1 and the second one is Box-2. Now we want to place Box-2 inside the Box-1, in this condition, we will use position absolute for Box-2. Or in another word we can say that we use absolute position when we want to place an element in the other element. You can understand this in a better way with this example.

For Example:- https://codepen.io/ioowilly/pen/wMbyaz

CSS Fixed Position

Next is fixed position. The role of CSS fixed position depends on its name. When we want to fix an element in the selected position, then we will use the CSS Fixed position. When we declare the fixed position to any element on a web page, then it will be fixed in that position and will not disappear when the page will scroll.

For Example:- https://codepen.io/cem_eygi/pen/EebjaB

CSS Sticky Position

The last one is the sticky position. It is a mixture of Relative and Fixed positions. We will use a Sticky position when we want to stick any Section or navbar on the web page scroll. You can understand in a better way with this example.

For Example:- https://codepen.io/cem_eygi/pen/RYjrWz

You can also Read –Best Website for Free image Sources

Technology Web Designing Web Development Websites