CSS Position

Position Types

🔸 Static Position (Default)

/* Static positioning */
.static-box {
    position: static;
    background: #e3f2fd;
    padding: 20px;
    border: 2px solid #2196f3;
    margin: 10px 0;
}

/* top, right, bottom, left have no effect on static elements */

<div class="static-box">
    Static Position (Default)
    <br>Elements flow in normal document order
</div>

🔸 Relative Position

/* Relative positioning */
.relative-container {
    background: #f5f5f5;
    padding: 20px;
    border: 1px dashed #999;
}

.relative-box {
    position: relative;
    top: 20px;
    left: 30px;
    background: #fff3e0;
    padding: 15px;
    border: 2px solid #ff9800;
}

<div class="relative-container">
    Normal flow content before
    <div class="relative-box">
        Relative Position
        <br>Moved 20px down, 30px right from normal position
    </div>
    Normal flow content after
</div>

🔹 Absolute Position

Positioned parent containers establish reference frames for absolutely positioned child elements through relative, absolute, or fixed positioning. This containment creates predictable coordinate systems for top, right, bottom, and left property calculations. Proper implementation prevents unexpected positioning contexts and scrolling anomalies. Container establishment represents fundamental understanding for complex layout implementations requiring precise element placement across various viewport dimensions.

/* Absolute positioning */
.absolute-container {
    position: relative; /* Creates positioning context */
    height: 200px;
    background: #f3e5f5;
    border: 2px solid #9c27b0;
}

.absolute-box {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 150px;
    background: #e1bee7;
    padding: 15px;
    border: 2px solid #9c27b0;
}

<div class="absolute-container">
    <p>This is the positioned parent container</p>
    <div class="absolute-box">
        Absolute Position
        <br>Positioned relative to parent
    </div>
</div>

🔹 Fixed Position

position: fixed anchors elements relative to viewport boundaries, maintaining placement during scrolling interactions. This behavior creates persistent navigation bars, promotional banners, and feedback widgets. Implementation considers mobile viewport idiosyncrasies and keyboard navigation accessibility. Fixed elements require careful z-index management to prevent content occlusion and proper responsive behavior to avoid overlapping critical interface components.

/* Fixed positioning */
.fixed-box {
    position: fixed;
    top: 10px;
    right: 10px;
    width: 200px;
    background: #e8f5e8;
    padding: 15px;
    border: 2px solid #4caf50;
    z-index: 1000;
}

/* Common use: Fixed navigation */
.fixed-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #333;
    color: white;
    padding: 10px;
    z-index: 999;
}

<!-- Fixed navigation bar -->
<nav class="fixed-nav">
    Fixed Navigation Bar
</nav>

<!-- Fixed notification box -->
<div class="fixed-box">
    Fixed Position
    <br>Stays in viewport corner
</div>

🔹 Sticky Position

CSS position: sticky creates elements that toggle between relative and fixed behaviors based on scroll position thresholds. This hybrid approach supports table headers, section navigation, and filter controls that need persistent visibility within content regions. Implementation defines offset boundaries through top, bottom, or sibling element relationships. Sticky positioning enhances content accessibility without disrupting document flow, improving user experience metrics.

/* Sticky positioning */
.sticky-header {
    position: sticky;
    top: 0;
    background: #fce4ec;
    padding: 15px;
    border: 2px solid #e91e63;
    margin: 20px 0;
    z-index: 10;
}

.content-section {
    height: 300px;
    background: #f5f5f5;
    padding: 20px;
    margin: 10px 0;
    border: 1px solid #ddd;
}

<div class="content-section">Content before sticky element</div>

<div class="sticky-header">
    Sticky Header - Sticks to top when scrolling
</div>

<div class="content-section">Content after sticky element</div>
<div class="content-section">More content to scroll through</div>

🔹 Positioning Properties

Precise element positioning utilizes top, right, bottom, and left properties with length or percentage values. These properties establish offsets from corresponding container edges based on positioning context. Implementation combines multiple properties for centered placement and dimension-based positioning. Understanding property interactions and negative values enables sophisticated layout solutions that maintain responsiveness across different screen sizes.

/* Positioning with coordinates */
.positioned-examples {
    position: relative;
    height: 250px;
    background: #f0f0f0;
    border: 2px dashed #666;
}

.top-left {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #ffcdd2;
    padding: 10px;
}

.top-right {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #c8e6c9;
    padding: 10px;
}

.bottom-center {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff3e0;
    padding: 10px;
}

<div class="positioned-examples">
    <div class="top-left">Top Left</div>
    <div class="top-right">Top Right</div>
    <div class="bottom-center">Bottom Center</div>
</div>

🔹 Centering with Position

Absolute positioning centering combines top: 50%, left: 50% with transform: translate(-50%, -50%) for perfect vertical and horizontal alignment. This technique centers elements regardless of parent dimensions without fixed measurements. Implementation works within positioned containers and supports responsive behavior across viewport changes. Modern alternatives include Flexbox and Grid centering, but transform-based absolute centering remains valuable for specific overlay and modal scenarios.

/* Center absolutely positioned element */
.center-container {
    position: relative;
    height: 200px;
    background: #e3f2fd;
    border: 2px solid #2196f3;
}

.center-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #bbdefb;
    padding: 20px;
    border: 2px solid #1976d2;
    text-align: center;
}

<div class="center-container">
    <div class="center-box">
        Perfectly Centered
        <br>Using absolute position
    </div>
</div>