Updates

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.


All Types of CSS positions with example

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.

CSS Static Position

This is the first type of CSS positions or in other word 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 one type of CSS position. If we want to place element to the new position in comparison of its normal position, then we will use the CSS relative position. That means we can place 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 web page.

Read Also - Role of Website Domain


CSS Absolute Position

CSS absolute 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. First one is Box-1 and the second one is Box-2. Now we want to place Box-2 to inside the Box-1, in this condition, we will use position absolute for Box-2. Or in other 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.

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 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.

CSS Sticky Position

Last one is the sticky position. It is a mixture of Relative and Fixed position. We will use 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.

No comments