Chapter 5: CSS Positioning | WebLearner Pro

Chapter 5: CSS Positioning

CSS positioning allows you to control the layout of elements on a webpage. It determines how an element is placed within the document flow. In this chapter, you will learn about the different types of positioning in CSS and how to use them effectively.

5.1 Types of Positioning

CSS provides five types of positioning:

  • Static: The default positioning where elements follow the normal document flow.
  • Relative: Positions the element relative to its original position.
  • Absolute: Positions the element relative to its nearest positioned ancestor.
  • Fixed: Positions the element relative to the viewport.
  • Sticky: Toggles between relative and fixed based on the scroll position.

5.2 CSS Positioning Properties

5.2.1 Static Positioning

This is the default position value for all elements. The element is positioned according to the normal flow of the document.


/* Static Position Example */
div {
    position: static;
}

5.2.2 Relative Positioning

The element is positioned relative to its original position. You can use top, right, bottom, and left properties to move the element.


/* Relative Position Example */
div {
    position: relative;
    top: 20px;
    left: 30px;
}

5.2.3 Absolute Positioning

The element is removed from the normal document flow and positioned relative to its nearest positioned ancestor. If there is no positioned ancestor, it is positioned relative to the <html> element.


/* Absolute Position Example */
div {
    position: absolute;
    top: 50px;
    right: 50px;
}

5.2.4 Fixed Positioning

The element is positioned relative to the viewport and does not move when the page is scrolled.


/* Fixed Position Example */
header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #333;
    color: white;
}

5.2.5 Sticky Positioning

The element toggles between relative and fixed positioning based on the user's scroll position. This is useful for creating sticky headers or sidebars.


/* Sticky Position Example */
nav {
    position: sticky;
    top: 0;
    background-color: #f8f9fa;
}

5.3 Z-Index Property

The z-index property controls the stack order of elements. Higher values bring the element to the front.


/* Z-Index Example */
div {
    position: absolute;
    z-index: 10;
}

5.4 Practical Example

Here is an example combining multiple positioning techniques:


<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        header {
            position: fixed;
            top: 0;
            width: 100%;
            background-color: #3498db;
            color: white;
            text-align: center;
            padding: 10px;
        }
        .content {
            margin-top: 60px;
            position: relative;
        }
        .box {
            position: absolute;
            top: 50px;
            left: 100px;
            width: 150px;
            height: 150px;
            background-color: #f1c40f;
        }
    </style>
</head>
<body>
    <header>This is a fixed header</header>
    <div class="content">
        <div class="box">This is an absolute box</div>
        <p>Scroll down to see the fixed header in action.</p>
    </div>
</body>
</html>

5.5 Summary

In this chapter, you learned about CSS positioning and its five types: static, relative, absolute, fixed, and sticky. You also explored the z-index property and practical examples of positioning techniques. In the next chapter, we will delve into CSS Flexbox for creating flexible layouts.