CSS Positioning:

The CSS Position property is used to position an element in the webpage, and how it'll position, will depend on the property we choose to give. We'll have came around those fixed navbars on the top and those sticky navbars and guess what, they are all done with the help of CSS Position. In This blog we'll be discussing when to use which css property to get the best out of it.

Syntax:

selector{
  Position: Property;
}

Types of Positions:

1. Static Position:

Static Position is the default value of the position property. It have no effects in the positioning of any element.

https://codepen.io/aryaann/pen/ZExKdpp

2. Relative Position:

A Relative positioned element does not give any results, when {position: relative;} is applied to it. But when it is twiched with the left , right, top and bottom properties. It starts acting accordingly. If the element have left: 20px; that means from the place where it is positioned, it have to move 20px from left.

as we can see in the example:

https://codepen.io/aryaann/pen/qBojPoa

3. Absolute Position:

The Absolutely Positioned element is removed from the document flow. The elements with whom it was a sibling, they leave no space for the element. The Absolute position is used to align the element in context to it's parent element, which have the property **{position:relative;}** in it.

as we can see in the example, we gave position: relative; to the element with ID "three" and gave it's child the {position: absolute} and give left and bottom values "0". That means the child will align relatively bottom-left to its parent.

https://codepen.io/aryaann/pen/wvmePvN

4. Fixed Position:

When an item is position fixed, it is removed from the normal document flow and it'll be fixed to the viewport. So if even when scrolled through, it also scrolls, remaining at the same position. Syntax {position:fixed}

https://codepen.io/aryaann/pen/rNdwGqV

5. Sticky Position:

The Simplest explanation of sticky position is it sticks to the view port until it's relative parent is scrolled through. Syntax `{position:sticky;}.

https://codepen.io/aryaann/pen/BarZmde

Will Come again with such blogs.

Connect me: linkedin

CSS Positions: The Positioning Gamechanger.

Comments

More from this blog

The Faster Runtime War

Getting Started with Formik: A Comprehensive Guide

Prototype Chaining in JavaScript

Tailwind Installation with React using Vite

Pass by Reference vs Pass by Value in JavaScript

CSS Positioning:

Types of Positions:

1. Static Position:

2. Relative Position:

3. Absolute Position:

4. Fixed Position:

5. Sticky Position:

Command Palette

Comments

More from this blog

CSS Positioning:

Types of Positions:

1. Static Position:

2. Relative Position:

3. Absolute Position:

4. Fixed Position:

5. Sticky Position: