Let's move on Positions in CSS

The position property specifies the type of positioning method used for an element.We can set a particular position to an element in a webpage to set the location itself.The position property of elements are:

• static

• relative

• absolute

• fixed

• sticky

👉static : As like name ,The element is positioned according to the normal flow of the document.top, right, bottom, left, and z-index properties have no effect.

//HTML
<div class="static">
This div element has position: static;
</div>

//CSS
.static
 {
  position:static;
  border: 4px solid #73AD21;
}

👉relative : An element is positioned relative to its normal position.It will set itself from normal way to its very relative position.

//HTML
<div class="relative">
This div element has position: relative;
</div>

//CSS
.relative
{
 position: relative;
  top: 30px;
  border: 3px solid #73AD21;
}

👉absolute :This changes the position of the element relative to the parent element and relative to itself.That is it considered nearest positioned ancestor.

//HTML
<div class="relative">
This div element has position: relative;
</div>
<div class="absolute">
This div element has position: absolute;
</div>

//CSS
.relative
{
 position: relative;
  top: 30px;
  border: 3px solid #73AD21;
}
.absolute {
  position: absolute;
  top: 30px;
  border: 3px solid #73AD21;
}

👉fixed :An element with position: fixed; is positioned relative to the viewport.Even if we scroll down the webpage it will stay as it is fixed.

//HTML
<div class="fixed">
This div element has position: fixed;
</div>

//CSS
.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100px;
  border: 3px solid #73AD21;
}

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

//HTML
<div class="sticky">I am sticky!</div>

//CSS
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}