Understanding CSS Positioning Properties

Static Positioning

Elements follow the normal document flow without any special positioning behavior.

Relative Positioning

Elements are positioned relative to their normal position in the document flow. The original space occupied by the element is preserved, and the element does not break out of the normal flow.

Absolute Positioning

Elements are positioned relative to their nearest positioned ancestor. If no positioned ancestor exists, the element is positioned relative to the initial containing block (usually the viewport). The element is removed from the normal document flow and does not occupy space.

Common practice: Use absolute positioning for child elements with relative positioning on the parent container.

Fixed Positioning

Elements are positioned relative to the browser viewport and remain fixed during scrolling. The element is removed from the normal documetn flow.

Sticky Positioning

Elements behave like relatively positioned elements until they reach a specified threshold, then behave like fixed positioning. Sticky elements stick to the nearest scrolling ancestor when certain scroll conditions are met.

Fixed Positioning Example

<!DOCTYPE html>
<html>
<head>
    <style>
        .main-content {
            margin: 0 auto;
            background: lightblue;
            width: 60%;
            height: 3000px;
        }
        
        .dismiss-btn {
            position: fixed;
            right: 20%;
            top: 150px;
            width: 80px;
            height: 80px;
            background: lightgreen;
        }
        
        .sidebar-left {
            position: fixed;
            left: 0;
            top: 0;
            width: 120px;
            height: 250px;
            background: lightcoral;
        }
        
        .sidebar-right {
            position: fixed;
            top: 0;
            right: 0;
            background: lightcoral;
            width: 120px;
            height: 250px;
        }
    </style>
</head>
<body>
    <div class="sidebar-left">Left Panel</div>
    <div class="main-content">Main Content<br>2024.1.15</div>
    <div class="dismiss-btn">Close</div>
    <div class="sidebar-right">Right Panel</div>
</body>
</html>

Sticky Positioning Example

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0;
        }
        
        .page-header, .page-footer {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 60%;
            margin: 0 auto;
            background: steelblue;
        }
        
        .page-header {
            height: 90px;
        }
        
        .page-footer {
            height: 70px;
        }
        
        .content-wrapper {
            margin: 0 auto;
            width: 60%;
            height: 600px;
            overflow: auto;
        }
        
        .date-section {
            margin-bottom: 20px;
        }
        
        .date-header {
            position: sticky;
            top: 0;
            background: navy;
            color: white;
            padding: 10px;
        }
        
        .item-container div {
            width: calc(50% - 15px);
            display: inline-block;
            height: 120px;
            float: left;
            background: whitesmoke;
            margin: 7px;
            box-sizing: border-box;
        }
        
        .item-container::after {
            content: '';
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="page-header">Header Section</div>
    <div class="content-wrapper">
        <div class="date-section">
            <div class="date-header">Monday 2024/1/15</div>
            <div class="item-container">
                <div>Item 1</div>
                <div>Item 2</div>
                <div>Item 3</div>
                <div>Item 4</div>
            </div>
        </div>
        <div class="date-section">
            <div class="date-header">Tuesday 2024/1/16</div>
            <div class="item-container">
                <div>Item 1</div>
                <div>Item 2</div>
                <div>Item 3</div>
                <div>Item 4</div>
            </div>
        </div>
        <div class="date-section">
            <div class="date-header">Wednesday 2024/1/17</div>
            <div class="item-container">
                <div>Item 1</div>
                <div>Item 2</div>
                <div>Item 3</div>
                <div>Item 4</div>
            </div>
        </div>
    </div>
    <div class="page-footer">Footer Section</div>
</body>
</html>

Tags: css Positioning web development frontend Layout

Posted on Wed, 16 Sep 2026 15:59:54 +0000 by madolia

Freaks City