Lesson 4: Absolute, Relative, Fixed & Sticky Positioning

1. The 5 CSS Position Schemes

position: static: The default document flow. top, left, right, and bottom have no effect.

position: relative: Offsets the element relative to its natural normal position without disrupting surrounding flow.

position: absolute: Removes the element from normal flow and positions it relative to the nearest positioned ancestor.

position: fixed: Pins the element relative to the browser viewport; stays visible during page scrolling.

position: sticky: Toggles between relative and fixed based on the user's scroll threshold offset.

⊞HTML5 Web Code (index.html)

<!DOCTYPE html>

<head>

<title>CSS Positioning Schemes</title>

<style>

body {

background-color: #17181c;

color: #ffffff;

font-family: Arial, sans-serif;

height: 1200px; /* Enable scrolling */

padding: 20px;

}

/* Sticky Header Bar */

.sticky-header {

position: sticky;

top: 0;

background-color: #1f2029;

padding: 14px 20px;

border-bottom: 2px solid #04AA6D;

z-index: 100;

}

/* Relative Parent Container */

.card-container {

position: relative;

width: 320px;

height: 180px;

background-color: #242632;

margin: 40px auto;

border-radius: 12px;

padding: 20px;

}

/* Absolute Badge inside Relative Parent */

.badge {

position: absolute;

top: -10px;

right: -10px;

background-color: #04AA6D;

color: #fff;

padding: 4px 10px;

border-radius: 12px;

font-size: 11px;

font-weight: bold;

}

</style>

</head>

<body>

<strong>⊞ Sticky Header: Remains visible while scrolling down</strong>

</div>

<h3>Relative Parent Card</h3>

<p>The green badge is positioned absolutely at top: -10px, right: -10px.</p>

</div>

</body>

</html>

1. The 5 CSS Position Schemes

Interactive Knowledge Check