🎯 Css Positioning Properties 🙂

👋WELCOME_BACK AGAIN WITH CSS POSITIONING🙇‍♂️

Hey Folks, welcome back with the new article CSS positioning. In this article, we are going to read the position properties available in CSS. we will know what Positions in CSS what are the types, how it works and so many things. And after reading this article we got some idea about Positions in CSS😇.

let's get started⏩

💠What are Position Properties in CSS?

The properties which are used to manipulate the location or the position of an element are known as "Position properties". It is also used to place an element behind another.

🎟️Types of position properties :

Generally, there are five types of position properties used in CSS.

• 📍 Static

• 📍 Relative

• 📍 Absolute

• 📍 Fixed

• 📍Sticky

🟢 Static :

In the static position, the element is positioned according to the normal flow of the document. The default position: top, right, bottom, left, and z-index has no effect. The positions have already been set by default.

Syntax:

             position:static;

🟢 Relative :

The top, right, bottom, left, and z-index will now work. Otherwise, the element is in the flow of the document like static.

Example:

here in code, we give position relative to box B and when we give the value like left 20px then it moves 20px from its normal position.

🟢 Absolute :

• The element is removed from the flow and is relatively positioned to its first non-static ancestor.

• Its final position is determined by the values of top, right, bottom, and left.

Example:

🟢 Fixed :

• It is just like absolute except the element is positioned relative to the browser window.

• An element with fixed positioning allows it to remain in the same position even we scroll the page.

• We can set the position of the element using the top, right, bottom, and left.

Example:

🟢 Sticky :

• The element is positioned based on the user's scroll position.

• here in the example element is placed in the middle of the document then when the user scrolls the document, the sticky element starts scrolling until it touches the top.

• here I'm using the top but We can stick the element at the bottom, with the bottom property.

Example:

Now we got some Idea about the Position properties of CSS. I hope you like it. For better understanding try all the code and theory with your self read it and practice 😇

❤️Thank You :) 🙇‍♂️🙇‍♂️🙇‍♂️

---