Welcome to Part 6 of the CSS Mastery & Responsive Layouts Course. In this part, we will explore CSS Positioning.

By default, the browser lays out elements in a vertical block or horizontal inline order known as the Normal Document Flow. However, to build modern interfaces (like sticky headers, floating action buttons, modal dialogs, and overlapping cards), you must break elements out of this flow. CSS offers the position property to manage these layouts.

---

Chapter 44: Normal Flow vs. Out-of-Flow

Before we change positioning values, we must understand the default document layout behavior.

44.1 Normal Flow

In normal flow, block-level elements stack vertically one after the other, and inline elements flow horizontally next to each other inside their block containers. Elements take up physical space, and neighboring elements adjust their position around them.

44.2 Out-of-Flow

When you set position: absolute or position: fixed, you remove the element completely from the normal document flow.

• The element occupies zero space in the document layout.
• Adjacent elements behave as if the out-of-flow element does not exist, closing the gap and moving into its space.
• The element is rendered on a separate painting layer, allowing it to overlay other elements.

44.3 Offsets vs. Margins (Performance Deep-Dive)

Shifting an element using position: relative offsets (like left: 20px) does not alter the layout coordinates of adjacent elements. As a result, shifting relative elements only triggers the Repaint pipeline step, which is computationally cheap. Conversely, shifting elements using margin-left: 20px forces the browser to recalculate the document layout tree (the Reflow step), which is expensive and can cause stuttering during animations.

---

Chapter 45: Static & Relative Positioning

45.1 Position: Static (position: static)

This is the default value for every HTML element.

• Elements render inside the normal document flow.
• Offsets are ignored: Properties like top, right, bottom, left, and z-index have no effect on static elements.

45.2 Position: Relative (position: relative)

Relative positioning acts as a modification of the normal flow. The element remains in the normal flow, but you can offset it from its original starting position.

.shifted-box {
  position: relative;
  top: 20px;  /* Pushes the element 20px down from its original top position */
  left: 10px; /* Pushes the element 10px right from its original left position */
}

• Space is preserved: The original space occupied by the relative element remains blank in the layout. Adjacent elements do not collapse to fill it.
• Active offsets: Unlike static elements, relative elements respect top, right, bottom, and left properties.
• Containing Block Anchor: The most common use-case for position: relative is to act as a positioning anchor for nested position: absolute children.

---

Chapter 46: Absolute Positioning (position: absolute)

Absolute elements are removed from the normal flow and positioned relative to their nearest positioned ancestor (any ancestor element styled with a position other than static).

46.1 Containing Block Anchoring

If an absolute child has no positioned ancestors, it resolves positioning relative to the initial containing block (the browser viewport bounds).

/* Parent acts as the reference anchor */
.card-parent {
  position: relative;
  width: 300px;
  height: 200px;
}

/* Absolute child is placed exactly in the top-right corner of the parent card */
.card-badge {
  position: absolute;
  top: 10px;
  right: 10px;
}

46.2 Parent Border & Padding Offsets

When an absolute element coordinates are resolved relative to a positioned parent:

• The top/left offsets are measured starting from the padding-box boundary of the parent.
• This means if the parent has a 10px border, an absolute child with top: 0; left: 0; will render inside the border, aligned with the outer padding boundary.

46.3 The inset Shorthand

Modern CSS supports inset as a shorthand for declaring top, right, bottom, and left offsets in a single property:

/* Standard format */
.modal-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* Shorthand modern equivalent */
.modal-overlay-modern {
  position: absolute;
  inset: 0; /* Applies 0 offset to all 4 sides */
}

---

Chapter 47: Fixed Positioning (position: fixed)

Fixed elements are removed from the normal flow and positioned relative to the browser viewport (screen edge).

• Locked Scrolling: As the user scrolls the page, the fixed element remains locked in its screen coordinates.
• Common Use Cases: Sticky top navigation bars, floating action buttons (FABs), overlays, and modal screen overlays.

/* Locked header bar that stays at the top of the viewport */
.main-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: white;
}

---

Chapter 48: Sticky Positioning (position: sticky)

Sticky positioning is a hybrid positioning model. It behaves like position: relative inside the normal flow until the viewport scrolls to a specified threshold, at which point it behaves like position: fixed within its parent boundary.

.sticky-sidebar {
  position: sticky;
  top: 20px; /* Locks 20px from the top edge when scroll reaches it */
}

48.1 Core Sticky Constraints

1. Offset Requirement: You must specify at least one offset property (e.g. top: 0, bottom: 10px) for sticky positioning to activate.
2. Parent Height Limits: A sticky element is bound by its parent element’s height. If the parent container scrolls off the screen, the sticky element scrolls off with it.
3. Parent Overflow Pitfalls: If any ancestor container has overflow: hidden, overflow: scroll, or overflow: auto set, the sticky element will fail to stick because its scroll container references are cut off.

---

Chapter 49: Stacking Contexts & z-index

When elements overlap, the browser determines which elements render in front of others. This is called the stacking order, managed by the z-index property.

49.1 z-index Rules

• z-index only works on positioned elements (elements with position values other than static).
• Positive values render closer to the user (in front), negative values render behind normal flow items.

49.2 Stacking Contexts (The Depth Tree)

A Stacking Context is an isolated rendering layer. A child element’s z-index is evaluated only within its parent’s stacking context.

  Initial Stacking Context (Root)
     ├── .card-a (z-index: 1)
     │      └── .badge-a1 (z-index: 9999) ──> Rendered under .card-b!
     └── .card-b (z-index: 2)

49.3 Stacking Order Hierarchy Table

Inside a single stacking context, layers are rendered from back to front in the following order:

Render Order	Layer Type	Description
1 (Back)	Background & Borders	The base elements of the containing block.
2	Negative z-index	Positioned children styled with negative z-index.
3	Block Level Elements	Non-positioned block elements in normal flow.
4	Floats	Non-positioned floated boxes.
5	Inline Elements	Text and inline elements in normal flow.
6	Positioned Elements	Positioned children styled with z-index: auto or z-index: 0.
7 (Front)	Positive z-index	Positioned elements styled with positive z-index values.

---

Chapter 50: Positioning Practice & Self-Check

50.1 Practice Exercises

1. Exercise 1: Centering a Modal: Centering a modal absolutely inside the screen using transform offsets.

   .modal-box {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 400px;
     padding: 20px;
     background: white;
   }

2. Exercise 2: Overlapping Profiles: Create a profile card with an overlapping circular avatar photo.

   .profile-card {
     position: relative;
     padding-top: 50px;
   }
   .profile-avatar {
     position: absolute;
     top: -40px;
     left: 50%;
     transform: translateX(-50%);
     width: 80px;
     height: 80px;
     border-radius: 50%;
   }

3. Exercise 3: Hover Tooltip: Create an absolute tooltip positioned above a button.

   .btn-container {
     position: relative;
     display: inline-block;
   }
   .tooltip {
     position: absolute;
     bottom: 110%;
     left: 50%;
     transform: translateX(-50%);
     display: none;
   }
   .btn-container:hover .tooltip {
     display: block;
   }

50.2 Self-Check Questions

1. What space does an absolutely positioned element occupy in the normal document layout flow?
   • Answer: Zero space. Neighboring elements collapse and layout around its boundaries.
2. Why does a parent require position: relative to contain an absolute child?
   • Answer: Absolute elements anchor to their nearest positioned ancestor. Setting relative on the parent makes it the containing block reference.
3. What happens to a sticky element when its parent container scrolls off screen?
   • Answer: The sticky element scrolls off the viewport with its parent.
4. Why does overflow: hidden on a parent disable sticky positioning on its child?
   • Answer: It breaks the scroll-parent context tracking required for the sticky boundary calculations.
5. Can an element with z-index: 1000 render behind an element with z-index: 2?
   • Answer: Yes, if the element with z-index: 1000 is nested inside a parent that has a lower stacking context hierarchy.
6. Does relative positioning remove elements from the normal document flow?
   • Answer: No, it keeps them in flow and preserves their original layout coordinates on the screen.
7. What viewport context is position: fixed relative to?
   • Answer: The browser viewport (screen window boundaries).
8. What is the modern CSS shorthand equivalent of setting top: 10px, bottom: 10px, left: 10px, right: 10px?
   • Answer: inset: 10px;.
9. What is the default value of the position property?
   • Answer: static.
10. Does z-index affect static elements?
    • Answer: No. z-index is ignored on elements with position: static.
11. Name two properties other than position that trigger a new stacking context.
    • Answer: opacity (values less than 1) and transform values.
12. How does transform: translate(-50%, -50%) align elements?
    • Answer: It shifts the element left by 50% of its own width and up by 50% of its own height, enabling perfect centering.
13. What containing block anchor is used if no positioned ancestors exist for absolute elements?
    • Answer: The initial containing block (viewport boundary).
14. Why are sticky elements sometimes called hybrid positioning elements?
    • Answer: Because they behave as relative in normal flow until a scroll threshold is met, switching dynamically to fixed positioning behavior.
15. Can you use z-index on a flexbox item even if its position is static?
    • Answer: Yes. Under the CSS Flexbox specification, child flex items respect z-index even when position is set to static.
16. Why is shifting with left: 20px more performant than margin-left: 20px?
    • Answer: It only triggers a repaint of the layer, skipping the layout step, which avoids costly document-wide reflows.
17. Does absolute positioning coordinate starting points measure from the parent’s border-box or padding-box?
    • Answer: The padding-box. Start coordinates begin inside the parent’s border boundary.
18. What value of z-index is assigned to elements by default?
    • Answer: auto (behaves like z-index: 0 but doesn’t trigger a new stacking context).
19. Can a fixed positioned element be contained inside a relative parent?
    • Answer: No. Fixed elements are always positioned relative to the browser viewport, ignoring relative ancestors.
20. What is the rendering layer position of negative z-index elements in the stacking context?
    • Answer: They are rendered behind all normal flow block and inline elements, directly in front of the parent container background.