DOM Positioning
A lifelong learner. Love to travel. Listen to music.
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.
