Cascade & Positioning in CSS (Lecture 4)

Cascading rules

The CSS Cascade is the rule system browsers use to decide which style wins when multiple CSS rules target the same element. Since browsers can’t guess, they follow a strict hierarchy (like tie-breaker rounds). Once a winner is found, later rules are ignored.

Rules:

  1. Origin of Styles:
    • Browser default styles, user styles, and author (developer) styles compete.
    • Author styles usually win over browser defaults.
    • <p>Hello World</p>
<style> 
p { 
  color: blue; 
  } 
</style>
  2. Specificity:
    • Inline > ID > Class/Attribute/Pseudo-class > Element/Pseudo-element.
    • <p class="text" id="main" style="color: red;">Hello</p>
<style>
p { color: blue; }        /* lowest specificity */
.text { color: green; }   /* class is stronger */
#main { color: purple; }  /* id is stronger */
</style>
  3. Importance:
    • !important beats everything except another !important with higher specificity.
    • <p class="note">Hello</p>
<style>
  p { color: blue !important; }   /* wins */
  .note { color: green; }         
</style>
  4. Source Order:
    • If specificity and importance are equal, the last rule in code wins.
    • <p>Hello</p>
<style>
  p { color: blue; }
  p { color: green; } /* last rule wins */
</style>

CSS Position

The position property in CSS controls how an element is placed on a webpage. It defines whether an element follows the normal page flow or is moved elsewhere. The property works together with the offset values: top, right, bottom, and left.

css positions property



Properties Code
  • static (default)
    • All elements are static unless specified.
    • They follow the normal document flow (stacking one after another).
    • Offsets (top, left, etc.) are ignored.
    • Commonly used for normal content.
 
<div style="position: static;">Static Box</div>
  • relative
    • Element remains in the normal flow but can be shifted using offsets.
    • Space is still reserved in its original position (like an invisible placeholder).
    • Useful when you want slight adjustments without breaking layout.
 
<div style="position: relative; top: 20px; left: 10px;">
  Relative Box
</div>
  • absolute
    • Element is removed from normal flow (it doesn’t push other elements).
    • It is positioned relative to the nearest ancestor that has position set (not static).
    • If no ancestor is positioned, it uses the document body.
    • Often used for tooltips, dropdowns, popups, etc.
 
<div style="position: relative;">
  Parent
  <div style="position: absolute; top: 10px; left: 20px;">
    Absolute Child
  </div>
</div>
  • fixed
    • Element is positioned relative to the browser window (viewport).
    • It does not move when the page is scrolled.
    • Common for sticky navigation bars, floating buttons, or chat widgets.
 
<div style="position: fixed; bottom: 0; right: 0;">
  Fixed Box
</div>
  • sticky
    • Hybrid of relative and fixed.
    • Starts as relative (moves with the document flow).
    • Once scrolled beyond a threshold, it "sticks" like fixed.
    • Great for sticky table headers or section titles.
 
<div style="position: sticky; top: 0; background: yellow;">
  Sticky Header
</div>

Other Notes on Positioning

  1. Z-index:

    Works with positioned elements (relative, absolute, fixed, sticky) to control which element appears on top when they overlap.

  2. Stacking Context:

    Created by positioned elements with z-index, which affects how child elements overlap.

  3. Position + Display:

    Positioning changes only placement, not whether an element is block or inline



See the video lecture