CSS Position Properties Explained: Complete Guide

Overview

static: Default position. It does not allow setting properties like top, bottom, left, right, z-index

relative: Acts the same as static. but allows positioning it relatively by putting properties like top, bottom, left, right, z-index

absolute: Remove the DOM from the DOM tree and position it to the root element unless the parent has some position other than static. Ideal way to implemet is, make the current postion absolute and parent element position as relative.

fixed: Move to the top, ignores all the parents, stays there even if it is scrolling

sticky: With sticky position while the parent is relative, the DOM fixed it to the top while scrolling. It is a combination of fixed and relative position. To implement this, the current element should have sticky position and the parent should have relative position.

`static` vs `relative`

Both align with regular DOM flow; however, unlike static, in relative We can set the top, bottom, left, right and z-index.

`absolute` vs `fixed`

Both ignore the Dom and move to the very top. However, unlike absoluteThe fixed does not scroll.

Combination of `absolute` and `relative`

absolute took the Dom to the very top, unlike there is a parent other than static, like relative.

`absolute` vs `translate`

absoulte remove the dom and as a reference use the parent element (other than the static). However, translate also moves the element but uses itself as a reference. Since, translate does not invoke the browser to repaint the DOM, it is more efficient.

DOM Positioning

Comments

Node.js & JavaScript

CSS Selector Specificity

More from this blog

The Comprehensive Guide to REST API Architecture and Conventions

JavaScript Loading Strategies in Web Page: async and defer

CSS Selector Specificity

Understanding CSS Display Property

Overview

`static` vs `relative`

`absolute` vs `fixed`

Combination of `absolute` and `relative`

`absolute` vs `translate`

References

Command Palette

Comments

Node.js & JavaScript

CSS Selector Specificity

More from this blog

Overview

static vs relative

absolute vs fixed

Combination of absolute and relative

absolute vs translate

References

`static` vs `relative`

`absolute` vs `fixed`

Combination of `absolute` and `relative`

`absolute` vs `translate`