CSS Positioning and Layering

/* Static (default) - normal flow */
.static {
    position: static;
    top: 20px;  /* Has no effect */
}

/* Relative - offset from normal position */
.relative {
    position: relative;
    top: 20px;   /* Moves down 20px from normal position */
    left: 10px;  /* Moves right 10px */
    /* Original space in layout is preserved */
}

/* Absolute - positioned relative to nearest positioned ancestor */
.absolute {
    position: absolute;
    top: 0;    /* Top of positioned parent */
    right: 0;  /* Right edge of positioned parent */
    /* Removed from document flow */
}

/* Fixed - positioned relative to viewport */
.fixed {
    position: fixed;
    bottom: 20px;  /* 20px from bottom of viewport */
    right: 20px;   /* 20px from right of viewport */
    /* Stays in place during scrolling */
}

/* Sticky - relative until scroll threshold */
.sticky {
    position: sticky;
    top: 0;  /* Sticks to top when scrolled to */
    /* In flow until sticky threshold is reached */
}

/* Centered absolute positioning */
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Full coverage overlay */
.overlay {
    position: fixed;
    inset: 0;  /* Shorthand for top: 0; right: 0; bottom: 0; left: 0; */
    /* Or: top: 0; right: 0; bottom: 0; left: 0; */
}

/* Sticky header with shadow on scroll */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Absolute positioning with explicit container */
.container {
    position: relative;  /* Establishes positioning context */
}

.badge {
    position: absolute;
    top: -10px;
    right: -10px;
}

/* Parent creates stacking context */
.parent {
    position: relative;
    z-index: 1;
}

/* Child cannot escape parent's context */
.child {
    position: absolute;
    z-index: 999999;  /* Only stacks within parent, not globally */
}

/* Sibling with higher z-index appears above entire parent */
.sibling {
    position: relative;
    z-index: 2;  /* Appears above parent and all its children */
}

/* Force new stacking context without positioning */
.isolated {
    isolation: isolate;  /* Creates context without other side effects */
}

/* Common pitfall - opacity creates context */
.modal-overlay {
    opacity: 0.95;  /* Creates stacking context! */
}

.modal-content {
    z-index: 1000;  /* Only applies within overlay context */
}

/* Z-index scale for consistency */
:root {
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal-overlay: 1000;
    --z-modal-content: 1001;
    --z-popover: 2000;
    --z-tooltip: 3000;
}

.dropdown { z-index: var(--z-dropdown); }
.modal-overlay { z-index: var(--z-modal-overlay); }
.modal-content { z-index: var(--z-modal-content); }

/* Identify stacking contexts in DevTools */
.debug-stacking-context {
    position: relative;
    z-index: 0;
    outline: 2px solid red;  /* Visual indicator */
}

/* Prevent accidental context creation */
.no-context {
    /* Avoid: opacity < 1, transform, filter, etc. */
    /* Use isolation: isolate when context is needed */
}

/* Basic sticky header */
.header {
    position: sticky;
    top: 0;
    background: white;
    z-index: 100;
}

/* Add shadow when stuck (requires JS or scroll-timeline) */
.header.is-stuck {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* CSS-only shadow using pseudo-element */
.header {
    position: sticky;
    top: 0;
    background: white;
    z-index: 100;
}

.header::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

/* Stacked sticky sections */
.section-header {
    position: sticky;
    top: 60px;  /* Below main header */
    background: #f5f5f5;
    z-index: 90;
}

/* Sticky table header */
table {
    border-collapse: collapse;
}

thead th {
    position: sticky;
    top: 0;
    background: white;
    z-index: 2;
    box-shadow: 0 1px 0 #ddd;
}

/* Sticky first column */
tbody td:first-child,
thead th:first-child {
    position: sticky;
    left: 0;
    background: white;
    z-index: 1;
}

/* Corner cell needs highest z-index */
thead th:first-child {
    z-index: 3;  /* Above both sticky header and column */
}

/* Sticky sidebar */
.sidebar {
    position: sticky;
    top: 80px;  /* Below header */
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

/* Sticky footer CTA */
.cta-bar {
    position: sticky;
    bottom: 0;
    background: white;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
    padding: 1rem;
}

/* Define anchor element */
.button {
    anchor-name: --my-button;
}

/* Position tooltip relative to anchor */
.tooltip {
    position: absolute;
    position-anchor: --my-button;
    
    /* Position below button */
    top: anchor(bottom);
    left: anchor(center);
    transform: translateX(-50%);
    
    /* Or position above */
    /* bottom: anchor(top); */
}

/* With offset */
.popover {
    position: absolute;
    position-anchor: --trigger;
    top: calc(anchor(bottom) + 8px);  /* 8px gap */
    left: anchor(left);
}

/* Anchor to specific side */
.menu {
    position: absolute;
    position-anchor: --menu-button;
    top: anchor(top);
    left: anchor(right, 10px);  /* 10px from right edge */
}

/* Define fallback positions */
@position-fallback --tooltip-fallback {
    /* Try: below, centered */
    @try {
        top: anchor(bottom);
        left: anchor(center);
        transform: translateX(-50%);
    }
    
    /* If overflow, try: above, centered */
    @try {
        bottom: anchor(top);
        left: anchor(center);
        transform: translateX(-50%);
    }
    
    /* If still overflow, try: right side */
    @try {
        top: anchor(center);
        left: anchor(right);
        transform: translateY(-50%);
    }
    
    /* Last resort: left side */
    @try {
        top: anchor(center);
        right: anchor(left);
        transform: translateY(-50%);
    }
}

.tooltip {
    position: absolute;
    position-anchor: --button;
    position-fallback: --tooltip-fallback;
}

/* Scroll-linked animation (CSS Scroll-driven Animations) */
@keyframes fade-in {
    from { opacity: 0; transform: translateY(50px); }
    to { opacity: 1; transform: translateY(0); }
}

.scroll-reveal {
    animation: fade-in linear;
    animation-timeline: view();  /* Animates as element enters view */
    animation-range: entry 0% entry 100%;  /* Start/end within entry range */
}

/* Parallax with scroll timeline */
@keyframes parallax {
    to { transform: translateY(-100px); }
}

.parallax-bg {
    animation: parallax linear;
    animation-timeline: scroll();  /* Linked to scroll position */
}

/* Progress bar based on scroll */
.progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    background: blue;
    transform-origin: left;
    animation: grow linear;
    animation-timeline: scroll();
}

@keyframes grow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* Vertical scroll snap */
.scroll-container {
    scroll-snap-type: y mandatory;  /* Vertical snapping required */
    overflow-y: scroll;
    height: 100vh;
}

.scroll-section {
    scroll-snap-align: start;  /* Snap to top of section */
    scroll-snap-stop: always;  /* Force stop at each section */
    height: 100vh;
}

/* Horizontal scroll snap (carousel) */
.carousel {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    gap: 1rem;
}

.carousel-item {
    flex: 0 0 300px;
    scroll-snap-align: center;  /* Center each item */
}

/* Scroll padding for sticky headers */
html {
    scroll-padding-top: 80px;  /* Offset for sticky header */
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Fixed positioning that respects scroll container */
.scroll-container {
    overflow: auto;
    height: 100vh;
}

/* Fixed within scroll container (not viewport) */
.fixed-in-container {
    position: sticky;  /* Use sticky instead of fixed */
    top: 0;
    z-index: 10;
}

/* Fade header on scroll (with JS toggle) */
.header {
    position: fixed;
    top: 0;
    width: 100%;
    transition: transform 0.3s, box-shadow 0.3s;
}

.header.scrolled {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header.hidden {
    transform: translateY(-100%);
}

/* Parallax sections with different speeds */
.parallax-slow {
    animation: parallax linear;
    animation-timeline: scroll();
}

@keyframes parallax {
    to { transform: translateY(calc(-100vh * 0.3)); }
}