Position in CSS with code example.

The position CSS property tells about the method of positioning for an element or an HTML entity. The top , right , bottom and left properties determine the final location of positioned elements. So, we can set the position of the element using the top, right, bottom and left.

Types Of Position Property : There are five different types of position property available in CSS:

1. static
2. relative
3. absolute
4. fixed
5. sticky

position: static;

It is the default position of HTML elements. Hence, static positioned elements are not affected by the top, bottom, left, and right properties.

  .static {
         position: static;
         border: 2px solid black;
 }

position: relative;

It is used when we need to position an HTML element relative to its normal position. We can set the top, right, bottom, and left properties that will cause the element to adjust away from the normal position.

 .relative {
        position: relative;
        left: 40px;
        border: 2px green;
}

position: absolute;

An element with the absolute position will move according to the position of its parent element. In the absence of any parent element, the HTML element will be placed relative to the page.

 .absolute {
          position: absolute;
          top: 50px;
          right: 0;
          width: 100px;
          height: 50px;
          border: 2px red;
}

position: fixed;

An element with position : fixed; will remain stuck to a specific position even after the page is scrolled. This position property is used when we want to keep an HTML element at a fixed spot no matter where on the page the user is.

   .fix{
         position: fixed;
            right: 6px;
            bottom: 2px 
    }

position: sticky;

An HTML element with position: sticky; will just sit there until a given position offset is met.

    .sticky {
               position: sticky;
               top: 3px;  
        }