CSS Positioning – Absolute, Relative, Fixed, and Sticky.

Lecture 11: CSS Positioning – Absolute, Relative, Fixed, and Sticky

Welcome to the eleventh lecture of the "Basic to Brilliance" course. In this lecture, we will explore the different types of CSS positioning: relative, absolute, fixed, and sticky. Understanding positioning allows you to control where elements appear on a page and how they behave as users interact with the content.

---

1. Understanding the position Property

The position property specifies how an element is positioned in the document. It can take the following values:

• static: Default value. Elements are positioned according to the normal document flow.
• relative: Element is positioned relative to its normal position.
• absolute: Element is positioned relative to its nearest positioned ancestor or the initial containing block.
• fixed: Element is positioned relative to the browser window and remains in the same position when scrolling.
• sticky: Element is treated as relative until it reaches a threshold (e.g., a scroll position), and then it becomes fixed.

---

2. Relative Positioning

An element with position: relative is positioned relative to its original (static) position. It remains in the document flow, meaning other elements will still take it into account.

• Example: Using relative positioning to move an element.

  .box {
    position: relative;
    top: 20px; /* Moves the box 20px down from its normal position */
    left: 30px; /* Moves the box 30px to the right */
  }

In this example, the element is shifted down by 20px and to the right by 30px from its original position, but its space in the document flow is preserved.

---

3. Absolute Positioning

Elements with position: absolute are removed from the document flow and positioned relative to their nearest positioned ancestor (i.e., an ancestor with a position other than static).

• Example: Absolutely positioning an element inside a container.

  .container {
    position: relative; /* This container is the reference for the absolute positioning */
    width: 300px;
    height: 200px;
    background-color: #f4f4f4;
  }

  .box {
    position: absolute;
    top: 50px;
    right: 20px;
    background-color: #333;
    color: white;
    padding: 10px;
  }

In this example:

• The .box is absolutely positioned 50px from the top and 20px from the right inside the .container element.
• The .container has position: relative, making it the positioning reference for the .box.

---

4. Fixed Positioning

An element with position: fixed is positioned relative to the browser window, regardless of how the page is scrolled.

• Example: Creating a fixed navigation bar.

  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: white;
    padding: 15px;
    text-align: center;
  }

In this example:

• The .navbar is positioned at the top of the viewport and remains fixed even when the page is scrolled.

---

5. Sticky Positioning

An element with position: sticky is treated as relative until the user scrolls past a defined threshold, at which point it becomes fixed.

• Example: Sticky header that stays at the top after scrolling.

  .header {
    position: sticky;
    top: 0;
    background-color: #333;
    color: white;
    padding: 10px;
  }

In this example:

• The .header behaves like a normal element until it reaches the top of the page. After that, it sticks to the top and remains visible as the user scrolls.

---

6. Z-Index

When elements are positioned (either relative, absolute, fixed, or sticky), you can control their stacking order using the z-index property. Higher z-index values make elements appear above lower ones.

• Example: Controlling the stacking order.

  .box1 {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 1; /* Lower z-index */
    background-color: #f4f4f4;
    padding: 20px;
  }

  .box2 {
    position: absolute;
    top: 80px;
    left: 80px;
    z-index: 2; /* Higher z-index */
    background-color: #333;
    color: white;
    padding: 20px;
  }

In this example:

• .box2 will appear above .box1 due to its higher z-index value.

---

7. Combining Positioning Techniques

You can combine positioning values to create advanced layouts.

• Example: Fixed sidebar with relative content area.

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
    height: 100vh;
    background-color: #333;
    color: white;
    padding: 20px;
  }

  .content {
    position: relative;
    margin-left: 220px; /* Account for the fixed sidebar */
    padding: 20px;
  }

In this layout:

• The .sidebar is fixed to the left of the page and stays visible when scrolling.
• The .content area is positioned relatively and adjusts its margin to account for the sidebar.

---

Practice Exercise

1. Create a webpage with a fixed header and footer, and use relative and absolute positioning for the content.
2. Add a sticky sidebar that becomes fixed when scrolling.

---

Next Up: In the next lecture, we’ll dive into CSS Transforms and Animations, where you'll learn how to animate your web elements with ease. Get ready to make your designs dynamic and interactive!

---

follow me on LinkedIn
Ridoy Hasan