Zia's Blog

Positions in CSS

Positions in CSS

Mohd Zia Ul Haq's photo
Mohd Zia Ul Haq
·

2 min read

In this article, we are going to learn about Positions in CSS. The position CSS property helps you set an element in a document. The top, right, bottom, and left properties determine the final location of the positioned elements.

In CSS, we have 5 different positions:

  1. static

  2. relative

  3. absolute

  4. fixed

  5. sticky

static :

This is the default value and the element is positioned according to the normal flow of the document. The top, right, bottom, and left properties won't have any effect.

.box {
  position: static;
}

relative :

The element is positioned according to the normal flow of the document and then will move relative to the top, bottom, right, and left. The top and bottom properties effect the vertical positioning from its normal position; similarly the left and right properties effects the horizontal positioning. The space given for the element in the page layout is same as if the position were static and it doesn't impact the positions of other elements.

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: red;
}

absolute :

The element is removed from the normal flow of the document and space is removed for the element unlike relative position where space is created. It is positioned relative to its parent or closest positioned ancestor or containing block. The top, right, bottom, and left properties determine its final position

#positioned {
  position: absolute;
  top: 30px;
  left: 30px;
  background: blue;
}

fixed :

The element is removed from the normal flow of the document and space won't be created for the element in the webpage layout. The element will be fixed at a position even if we scroll (used for Chat with us feature)

#two {
  position: fixed;
  top: 80px;
  left: 10px;
  background: yellow;
}

sticky :

The element is positioned according to the normal flow of the document, it behaves as a relatively positioned element until its parent or containing block crosses a specified position and then the element would get fixed to that spot. It is widely used for Menu Bar (even if the user scrolls it will sticked to the screen)

.sticky-div{
  position: sticky;
  top: 10px;
}

Thank you for reading!

#CSS #Positions #LCO #IWriteCode #iNeuron #FullStackJavaScriptWebDeveloperBootcamp

#LCOiwritecodeineuron