🔲 CSS Display & Positioning

/* Block-level elements */
div {
    display: block;
}

/* Characteristics:
   - Takes full width available
   - Starts on a new line
   - Can have width and height
   - Examples: div, p, h1-h6, section, article
*/

/* Inline elements */
span {
    display: inline;
}

/* Characteristics:
   - Only takes up necessary width
   - Stays on the same line
   - Cannot have width and height
   - Examples: span, a, strong, em, img
*/

/* Inline-block elements */
.box {
    display: inline-block;
    width: 100px;
    height: 100px;
}

/* Characteristics:
   - Flows inline like text
   - Can have width and height
   - Best of both worlds!
*/

/* Hide element completely */
.hidden {
    display: none;  /* Removes from document flow */
}

/* Compare with visibility */
.invisible {
    visibility: hidden;  /* Hidden but takes up space */
}

/* Flexbox container */
.container {
    display: flex;
}

/* Creates flexible layout
   - Powerful alignment options
   - Responsive by nature
   - Modern layout technique
*/

/* Grid container */
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

/* Creates two-dimensional grid layout
   - Rows and columns
   - Complex layouts made easy
*/

/* Default positioning */
div {
    position: static;
}

/* Characteristics:
   - Default value
   - Follows normal document flow
   - top, right, bottom, left have no effect
*/

/* Relative positioning */
.box {
    position: relative;
    top: 20px;     /* Move down 20px */
    left: 30px;    /* Move right 30px */
}

/* Characteristics:
   - Positioned relative to its normal position
   - Original space is preserved
   - Can use top, right, bottom, left
   - Creates positioning context for children
*/

/* Absolute positioning */
.parent {
    position: relative;  /* Create positioning context */
}

.child {
    position: absolute;
    top: 0;
    right: 0;
}

/* Characteristics:
   - Removed from normal document flow
   - Positioned relative to nearest positioned ancestor
   - If no positioned ancestor, relative to document body
   - Does not leave space in layout
*/

/* Fixed positioning */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: white;
    z-index: 1000;
}

/* Characteristics:
   - Removed from normal document flow
   - Positioned relative to viewport
   - Stays in place when scrolling
   - Perfect for navigation bars
*/

/* Sticky positioning */
.header {
    position: sticky;
    top: 0;
    background: white;
}

/* Characteristics:
   - Hybrid of relative and fixed
   - Acts relative until scroll threshold
   - Then becomes fixed
   - Great for table headers and section titles
*/

/* Z-index controls layering */
.bottom {
    position: relative;
    z-index: 1;
}

.middle {
    position: relative;
    z-index: 2;
}

.top {
    position: relative;
    z-index: 3;
}

/* Higher z-index = appears on top
   Only works on positioned elements (not static)
   Default z-index is auto (0)
*/

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

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

nav {
    position: sticky;
    top: 0;
    background: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 100;
}

.icon-wrapper {
    position: relative;
    display: inline-block;
}

.badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: red;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.card {
    display: block;
    padding: 20px;
    border: 1px solid #ddd;
}

.tooltip-wrapper {
    position: relative;
    display: inline-block;
}

.tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    white-space: nowrap;
    display: none;
}

.tooltip-wrapper:hover .tooltip {
    display: block;
}