📍 Display & Positioning

/* Block elements take full width available */
div {
    display: block;  /* Default for div, p, h1, etc. */
}

/* Characteristics */
.block {
    display: block;
    width: 100%;        /* Takes full width */
    /* Starts on new line */
    /* Can set width and height */
}

/* Inline elements flow with text */
span {
    display: inline;  /* Default for span, a, strong, etc. */
}

/* Characteristics */
.inline {
    display: inline;
    /* Stays on same line */
    /* Width/height ignored */
    /* Only horizontal padding/margin work properly */
}

/* Best of both worlds */
.inline-block {
    display: inline-block;
    width: 200px;
    height: 100px;
    /* Flows inline but accepts width/height */
    /* Respects all padding and margin */
}

/* Great for buttons, badges, cards */
.button {
    display: inline-block;
    padding: 10px 20px;
    margin: 5px;
}

/* Completely removes element from layout */
.hidden {
    display: none;
}

/* Element takes no space */
/* Compare to visibility: hidden (takes space) */
.invisible {
    visibility: hidden;  /* Hidden but takes space */
}

/* Modern layout systems (covered in detail later) */
.flex-container {
    display: flex;
}

.grid-container {
    display: grid;
}

/* Normal document flow */
.static {
    position: static;  /* Default */
}

/* Cannot use top, right, bottom, left */
/* Cannot use z-index */

/* Positioned relative to its normal position */
.relative {
    position: relative;
    top: 20px;     /* Move down 20px */
    left: 30px;    /* Move right 30px */
}

/* Original space is preserved */
/* Can use z-index */
/* Common use: Container for absolute children */

.container {
    position: relative;
}

.container .child {
    position: absolute;  /* Relative to .container */
}

/* Positioned relative to nearest positioned ancestor */
.absolute {
    position: absolute;
    top: 0;
    right: 0;
}

/* Removed from normal flow */
/* Positioned relative to nearest positioned ancestor */
/* Or viewport if no positioned ancestor */

/* Common pattern */
.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 10px;
    right: 10px;
}

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

/* Positioned relative to viewport */
.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

/* Stays in place when scrolling */
/* Common for headers, floating buttons */

.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: white;
    z-index: 100;
}

.floating-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

/* Hybrid of relative and fixed */
.sticky {
    position: sticky;
    top: 0;
}

/* Acts like relative until scroll threshold */
/* Then acts like fixed */

/* Sticky navigation */
nav {
    position: sticky;
    top: 0;
    background: white;
    z-index: 100;
}

/* Sticky sidebar */
.sidebar {
    position: sticky;
    top: 20px;
    align-self: flex-start;
}

/* top, right, bottom, left */
.positioned {
    position: absolute;
    top: 10px;       /* Distance from top */
    right: 20px;     /* Distance from right */
    bottom: 30px;    /* Distance from bottom */
    left: 40px;      /* Distance from left */
}

/* Can use negative values */
.overlap {
    position: relative;
    top: -10px;      /* Move up */
    left: -20px;     /* Move left */
}

/* Auto (default) */
.auto {
    position: absolute;
    top: 0;
    left: auto;      /* Calculated automatically */
}

/* Controls stacking order */
.layer1 {
    position: relative;
    z-index: 1;
}

.layer2 {
    position: relative;
    z-index: 2;      /* Appears above layer1 */
}

.layer3 {
    position: relative;
    z-index: 3;      /* Appears above both */
}

/* Only works on positioned elements */
/* Higher values appear on top */
/* Can be negative */

.behind {
    position: relative;
    z-index: -1;     /* Behind normal elements */
}

/* Common z-index scale */
.dropdown { z-index: 1000; }
.modal-backdrop { z-index: 1040; }
.modal { z-index: 1050; }
.tooltip { z-index: 1070; }

/* Float */
.float-left {
    float: left;
    margin-right: 20px;
}

.float-right {
    float: right;
    margin-left: 20px;
}

/* Clear floats */
.clear {
    clear: both;     /* Start below floats */
}

/* Clearfix for containers */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* Modern alternative: use Flexbox/Grid */

/* Fixed header */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 1000;
}

/* Account for fixed header */
body {
    padding-top: 60px;
}

/* Sticky sidebar */
.container {
    display: flex;
}

.sidebar {
    width: 250px;
    position: sticky;
    top: 80px;      /* Below fixed header */
    height: fit-content;
}

/* Overlay modal */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1040;
}

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 8px;
    z-index: 1050;
}

/* Card with badge */
.card {
    position: relative;
    padding: 20px;
}

.badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: red;
    color: white;
    padding: 5px 10px;
    border-radius: 15px;
}

/* Floating action button */
.fab {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #007bff;
    color: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 999;
}

/* Image overlay */
.image-container {
    position: relative;
    display: inline-block;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.image-container:hover .overlay {
    opacity: 1;
}

/* Dropdown menu */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: none;
    z-index: 1000;
}

.dropdown:hover .dropdown-menu {
    display: block;
}