CSS Magic

Priorities

Which css placement has the highest priorities?

1. !important tag
2. Inline CSS
3. Id Selector (#)
4. Class Selector (.)
5. Tag Selector

Positioning

How do various positions behave

1. Position Relative
   • Position of the element relative to its current position.
   • Even if the element is moved elsewhere, it still occupies its current position and no other element if allowed to enter its position automatically.
2. Position Absolute
   • The position according to the nearest parent/ancestor with position set to relative.
   • Leaves its actual position empty for other elements.
3. Position Static (Default)
   • same as nothing changed, its the default one, so no need to apply.
4. Position Fixed
   • It positions itself in accordance with the position of root element.
   • Sticks there even if the page scrolls in any direction.
   • Leaves its position empty for other elements.
5. Position Sticky
   • Behaves like Absolute till a threshold(position) is reached.
   • After the threshold position, it sticks there like a fixed element.