<h3 id="heading-the-position-property-specifies-the-type-of-positioning-method-used-for-an-element">The position property specifies the type of positioning method used for an element.</h3>
<h1 id="heading-the-position-property">The position Property</h1>
<ul>
<li>static</li>
<li>relative</li>
<li>fixed</li>
<li>absolute</li>
<li>sticky</li>
</ul>
<p> absolute and relative and sticky are most used property</p>
<h2 id="heading-position-static">position: static</h2>
<p>HTML elements are positioned static by default.</p>
<p>Static positioned elements are not affected by the top, bottom, left, and right properties.</p>
<h2 id="heading-position-relative">position: relative</h2>
<p>An element with position: relative; is positioned relative to its normal position.</p>
<p>By this property item will move, but it will take its own place.</p>
<h2 id="heading-position-absolute">position: absolute</h2>
<p>Absolute positioned elements are removed from the normal flow, and can overlap elements.</p>
<p>By this property item will move, but it will not take its own place.</p>
<p>Item will move respect to its global parent i.e. HTML.</p>
<h2 id="heading-position-sticky">position: sticky</h2>
<p>An element with position: sticky; is positioned based on the user's scroll position.</p>
<h2 id="heading-position-fixed">position: fixed</h2>
<p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.</p>
<h1 id="heading-here-is-the-example-with-photo-you-can-see-it-how-position-works">Here Is the Example with Photo You can see it, how position works</h1>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1658509877442/cyuWvMTTo.png" alt="Photo position.png" /></p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1658509892030/62Y88a5fR.jpg" alt="positions2a.jpg" /></p>


### The position property specifies the type of positioning method used for an element.

# The position Property


- static
- relative
- fixed
- absolute
- sticky


 absolute and relative and sticky are most used property

## position: static

HTML elements are positioned static by default.

Static positioned elements are not affected by the top, bottom, left, and right properties.

## position: relative

An element with position: relative; is positioned relative to its normal position.

By this property item will move, but it will take its own place.

## position: absolute

Absolute positioned elements are removed from the normal flow, and can overlap elements.

By this property item will move, but it will not take its own place.

Item will move respect to its global parent i.e. HTML.

## position: sticky

An element with position: sticky; is positioned based on the user's scroll position.

## position: fixed

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.


 #  Here Is the Example with Photo You can see it, how position works




![Photo position.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658509877442/cyuWvMTTo.png align="left")




![positions2a.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1658509892030/62Y88a5fR.jpg align="left")





CSS Position

If You Know the Beauty of Positions then You Can move Any Item any Where

The position property specifies the type of positioning method used for an element.

The position Property

position: static

position: relative

position: absolute

position: sticky

position: fixed

Here Is the Example with Photo You can see it, how position works