Element Positioning in CSS

As we know that styling is so much important for us as web designers. CSS is the beauty of our Websites over the internet.

Positioning is a very core concept of CSS which helps us to define the element's position on a Web Page. By Position, we simply mean whether we want our element to be fixed at just one position regardless of our events on a web page including scrolling as well.

The position is one of the CSS properties in which we mainly have static, relative, absolute, sticky, and fixed as one of its values. We'll be understanding these values of position property in detail below.

Let's first start with static as the value of the position property for our element.

• Static:- This is the default value of a position property in our HTML DOM. Our element position is already set to static if we don't change its value to any other like relative or absolute.

  • position: static; specified that elements should be displayed on the webpage as they appear in the document flow.

• Fixed:- This value of the position property is used by web designers if we want to specify the position of an element with respect to the browser window. The position of that element will be fixed with respect to the browser window and it will not be affected by any events of the User which includes scrolling of the web page.

  • position: fixed; top: 100px; this will fix the position of element just below 100px from window.

• Absolute:- Element with the absolute position will be positioned in relation to its first ancestor element we can simply apply properties such as left, right, top, and bottom after giving the position as absolute.

  • position: relative; top: 20px; left: 50px; - This will position element on its parent element with 20px margin from top and 50px margin from left.

• Relative:- A relative positioned element is relative to its normal position or to its normal flow of appearance by default and we can apply properties such as "left:20px" which adds 20 pixels to the element's LEFT position to its normal position.

  • position: relative; left: 20px; - By writing position relative we will just be allowing the element to deal with its normal flow.

• Sticky:- Sticky Position of an element is applied based on the user's scroll behavior. Sticky element switches between relative and fixed after a specific offset is met in the viewport. The basic and common example of this position can be shown with NavBars on the webpage. Based on the user's scroll behavior it changes from relative to fixed or fixed to relative.

  • position: sticky; will make our element sticky on our webpage.

I hope this short blog has given you a basic understanding of how positioning works in CSS, and as we know Practice makes a person better. Performing Practicals of Positioning will give us more understanding about how we can simply use this property to make our elements positioned in the right manner with respect to our requirements.