CSS POSITION
Rasel Ahmad
React JS Developer | MERN Stack Developer | Software Engineer | Next Js Developer
CSS POSITION
This blog is about the most confusing part of CSS for most beginner CSS learners. Basically, the CSS position property defines where the contents or position of the content will be placed in an element. More specifically CSS position property sets how an element positions on our document. The position top, bottom, left, and right properties define the final location of the positioned element.
The CSS position values are
Static:
The default position for the CSS position is ‘static’. The element position the element according to the normal flow of the document. The positions of the top, right, bottom, left, and z-index have no effect on the content. In simple words, if the position of an element is static, the element will render on the document's original flow.
Figure-1: static position
Relative:
The relative position of elements remains the normal flow of the document. But don’t show behavior like static. Here the positions of the top, right, bottom, left, and z-index affect the document. Using these we can set an offset to the specific position. For example if we set left: 20px, it will placed the 20px to the right.
Figure-2: relative position
Absolute:
The absolute position of elements is positioned relative to their parent element. In position absolute element is removed from the document's normal flow. The other element behaves that the element with absolute position is not in the document because no space is created for the element in the page layout. Top, bottom, left and right values determine the final position of the element.
Recommended by LinkedIn
Another thing to note is that an element with position: absolute is positioned relative to its closest positioned ancestor. That means that the parent element has to have a position value other than position: static.
If the parent element is’t positioned, it is positioned relative to the next parent element that is positioned. If there is no positioned ancestor element, it is positioned with document main parent (<html>) element.
For example: here
Fixed:
They are similar to absolute positioned element. They are also remove from the normal flow of the document and no space create for the element in the page layout. But they are always positioned with relative to <html> element.
Another most important thing about fixed position that they are not affected by scrolling. They are always stay in the same position on the screen.
For example here second box position is fixed in left 20px and top 70px.
Figure-4: fixed position
Sticky:
Sticky position is a mix of relative position and fixed position. It behaves like a relatively positioned element until a certain scroll point and then it behaves like a fixed element.
Figure-5: sticky position