How to set fixed position but relative to container in CSS ?

Last Updated : 01 Jun, 2023

In this article, we are going to learn about the fixed position but relative to the container in CSS, basically, we have two common methods, position: sticky property and position: fixed property. To set the position of an element to fixed but relative to its container, we can use the combination of the “position: fixed” and “position: relative” properties. First, you need to set the position property of the container to “relative,” which will create a new positioning context for its child elements. Then, you can set the position property of the fixed element to “fixed,” which will position it relative to the viewport. Finally, you can use the top, right, bottom, and left properties to position the element within its container.

We mainly use position: sticky to fix a container within a container. It is very easy to use.

Syntax:

Using position: sticky:

position: sticky;

Using position: fixed:

<div style="position: relative;">
    <div style="position: fixed;">Fixed element</div>
</div>

Example 1: In this example, we use position: sticky property.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>CSS Position property</title>
    <style>
        .out_container {
            display: flex;
            justify-content: center;
        }
 
        .sticky {
            position: sticky;
            top: 60px;
            background-color: #2ecc71;
        }
 
        .container {
            height: 250px;
            width: 350px;
            border: black;
            border-style: solid;
            overflow: auto;
        }
 
        h1 {
            font-size: 55px;
            color: green;
        }
    </style>
</head>
 
<body>
    <div class="out_container">
        <div class="container">
            <h1>GeeksforGeeks</h1>
            <div class="sticky">
                Sticky Positioning inside 
                a container.
            </div>
            <h3 style="font-size: 55px;">
                The position: sticky means the 
                element will scroll until it 
                reaches the offset value given 
                to it by the user and then stays 
                in its position. Sticky element 
                always stays within its parent 
                block and as soon as the parent 
                block leaves the screen as an 
                effect of scrolling, sticky 
                elements also leave with it.
            </h3>
        </div>
    </div>
</body>
</html>

Output:

Example 2: In this example, we use position: fixed property.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <style>
        .header {
            padding: 30px;
            background-color: white;
            color: green;
 
        }
 
        .parent {
            position: relative;
            background-color: red;
            width: 200px;
            height: 200px;
        }
 
        .child {
            position: fixed;
            left: 20px;
            background-color: yellow;
 
        }
    </style>
</head>
 
<body>
    <h1 class="header">GeeksforGeeks</h1>
    <div class="parent">
        <div class="child">Fixed</div>
    </div>
</body>
 
</html>