Natours/CSS_positioning_guide.html at main · BlockJakub/Natours · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Positioning Guide</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f8f9fa;
            padding: 20px;
        }

        .table {
            margin-top: 30px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        th {
            background-color: #4CAF50;
            color: white;
            text-align: center;
        }

        td {
            text-align: center;
            vertical-align: middle;
        }

        .highlight {
            background-color: #e7f9e7;
        }

        .table td code, .table th code {
            font-size: 0.9rem;
            background-color: #f1f1f1;
            padding: 2px 5px;
            border-radius: 4px;
        }

        .conclusion {
            font-weight: bold;
            margin-top: 40px;
            font-size: 1.1em;
        }

        .conclusion ul {
            line-height: 1.6;
        }

        .container {
            max-width: 1000px;
            margin: 0 auto;
        }

        .table-wrapper {
            margin-bottom: 40px;
        }
    </style>
</head>
<body>

<div class="container">
    <h1 class="text-center my-4">CSS Positioning Guide</h1>
    <p class="text-center mb-4">A comprehensive guide to understanding CSS positioning properties.</p>

    <div class="table-wrapper">
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>Position</th>
                    <th>Meaning</th>
                    <th>Example</th>
                </tr>
            </thead>
            <tbody>
                <tr class="highlight">
                    <td>static</td>
                    <td>Default positioning (normal document flow)</td>
                    <td><code>div { position: static; }</code></td>
                </tr>
                <tr>
                    <td>relative</td>
                    <td>Positions relative to its original location</td>
                    <td><code>div { position: relative; top: 20px; }</code></td>
                </tr>
                <tr class="highlight">
                    <td>fixed</td>
                    <td>Positions relative to the viewport (stays in place)</td>
                    <td><code>header { position: fixed; top: 0; }</code></td>
                </tr>
                <tr>
                    <td>absolute</td>
                    <td>Positions relative to its nearest positioned ancestor</td>
                    <td><code>.box { position: absolute; top: 50px; left: 100px; }</code></td>
                </tr>
                <tr class="highlight">
                    <td>sticky</td>
                    <td>Toggle between relative and fixed based on scroll</td>
                    <td><code>header { position: sticky; top: 0; }</code></td>
                </tr>
                <tr>
                    <td>inherit</td>
                    <td>Inherits position from its parent element</td>
                    <td><code>.child { position: inherit; }</code></td>
                </tr>
                <tr class="highlight">
                    <td>initial</td>
                    <td>Resets position to default (static)</td>
                    <td><code>.element { position: initial; }</code></td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="conclusion">
        <h3>Conclusion</h3>
        <ul>
            <li><code>static</code> → Default position, follows normal document flow.</li>
            <li><code>relative</code> → Positioned relative to its normal position.</li>
            <li><code>fixed</code> → Positioned relative to the viewport, stays in place when scrolling.</li>
            <li><code>absolute</code> → Positioned relative to its nearest positioned ancestor.</li>
            <li><code>sticky</code> → Toggle between relative and fixed based on scrolling.</li>
            <li><code>inherit</code> → Inherits positioning from the parent.</li>
            <li><code>initial</code> → Resets to default (<code>static</code>).</li>
        </ul>
    </div>
</div>

<!-- Bootstrap 5 JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>