#       
## Overview
The **positioning elements** in #key# CSS: Cascading Style Sheet #key# define the position of the HTML entity or the element. In CSS, there are five different types of positioning properties available:

- Fixed

- Static

- Relative

- Absolute

- Sticky

## Fixed

An element with the position **fixed** always stays in the same place even if we scroll the page. It remains in the same place. The properties are used to position the elements on the left, right, top, and bottom.



<html>
<body>

<h2>Fixed</h2>

<p>An element with the position fixed always stays in the same place even if we scroll the page it still remains in the same place. To position the elements the left, right, top and bottom properties are used.
</p>

<div class="fixed">
It has Fix Position
</div>

</body>
</html>

div.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 300px;
  border: 5px solid #046ad7;
}

codemirror

## Static

The **static** method of positioning is set by default. Such elements are not affected by the properties of the left, right, top, and bottom. It is always positioned according to the normal flow of the page. It is not positioned in any other special way. 


<html>
<body>

<h2>Static</h2>

<p>The method of positioning is set by default. They are not affected by the left, right, top and bottom properties. It is always positioned according to the normal flow of the page. It is not positioned in any other special way. </p>

<div class="static">
It has static position
</div>

</body>
</html>

div.static {
  position: static;
  border: 5px solid #046ad7;
}

## Relative

An element with a **relative** position is positioned relative to its normal position. If we set up the left, right, top, and bottom, we won't be able to fill the gap left by this element.

<html>
<body>

<h2>Relative</h2>

<p>An element with relative position is positioned relative to it's normal position. If we set up the left, right, top and bottom will not be able to fill the gap which is left by this element. </p>

<div class="relative">
It has relative position
</div>

</body>
</html>

div.relative {
  position: relative;
  left: 30px;
  border: 5px solid #046ad7;
}

## Absolute

An element with the **absolute** position is positioned with respect to its parent. It doesn’t depend on the elements under the same level or the siblings.

<html>
<body>

<h2>Absolute</h2>

<p>An element with the absolute position is positioned with respect to it's parent. It doesn't depend on the elements which are under the same level or on the siblings.</p>

<div class="relative">It has relative position
  <div class="absolute">It has absolute position</div>
</div>

</body>
</html>


div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #046ad7;
} 

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #046ad7;
}

## Sticky

An element with the **sticky** position is positioned according to the position of the user's scroll. 

Depending upon the position of the scroll, the sticky element toggles between the `fixed` and `relative`. 

<html>
<body>



<div class="sticky">Sticky Element</div>

<div style="padding-bottom:2000px">
  <p>In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.</p>
  <p>Scroll back up to remove the stickyness.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>

</body>
</html>

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #22dad1;
  border: 5px solid #007f9b;
}

What are positioning elements in CSS?

CSS positioning properties include fixed, static, relative, absolute, and sticky to define element positions.