How to Set Position Absolute but Relative to Parent in CSS ?

Last Updated : 01 Jun, 2023

The position: relative property changes the position of the element relative to the parent. The position-relative property can be applied to any section then the elements in that section are positioned in the normal flow of the document. It is relative to the original position with respect to the parent. To modify the position of elements, the offset can be applied to the elements by specifying the left, right, top, and bottom.

Syntax:

.classname{
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
}

Properties:

left: If the left side offset is applied to the particular section or element then it moves the right side of the element’s parent container.
right: If the right side offset is applied to the element then it moves left to the element’s parent container.
top: If the top side offset is applied to the element, it moves the element to the bottom of the element’s parent container.
bottom: If the bottom side offset is applied to the element, it moves the element to the top of the element’s parent container.

Approach: Here we use position: relative

syntax:

.classname {
    position: relative;
    left: 40px;
}

Example 1: In this example, we are using the above-explained approach.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>
        How to Set Position Absolute but
        Relative to Parent in CSS ?
    </title>
 
    <style>
        .child {
            position: relative;
            left: 40px;
        }
 
        .one {
            background-color: black;
            width: 60px;
            height: 60px;
            padding: 10px;
            margin: 10px;
        }
 
        .two {
            background-color: aqua;
            width: 60px;
            height: 60px;
            padding: 10px;
            margin: 10px;
        }
 
        p {
            color: darkgreen;
            font-weight: bolder;
            font-size: xx-large;
        }
    </style>
</head>
 
<body>
    <div class="parent">
        <div class="child">
            <p>GeekForGeeks</p>
        </div>
        <div class="child1 one"></div>
        <div class="chile2 two"></div>
    </div>
</body>
</html>

Output: The GeeksforGeeks text is positioned according to the parent element as it is relative to it and an offset of 40px is applied.

Approach: In the below example, we added other classes for your better understanding, if there is a position relative then you can change the position of the element respective to its parent.

Syntax:

:classname:hover 
 //it applies the property when we hover on that particular class

Example: In this example, we are using the above-explained approach.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>CSS tutorial</title>
    <!-- inline css -->
    <style>
        .parent {
            margin: 30px;
            margin-top: 40px;
            background-color: floralwhite;
        }
 
        .child:hover {
            position: relative;
            left: 35px;
            cursor: pointer;
 
        }
 
        p {
            font-weight: bolder;
            font-size: larger;
        }
 
        .main {
            color: darkgreen;
            font-size: xx-large;
            font-weight: bolder;
        }
    </style>
</head>
 
<body>
    <div class="parent">
        <p>
            Hello programmer welcome to GFG
        </p>
        <div class="child">
            <p class="main">
                GeekForGeeks
            </p>
        </div>
        <p>hover above</p>
    </div>
</body>
</html>

Output: Here the child element is changing its position and it is changed relative to the parent

position: absolute (Always relative to parent): The element is removed from normal document flow no space is allocated for the element if the absolute property is applied to that element, If the absolute property is applied to the element its parent should be relative, and it is positioned automatically (top-left-corner), It should be positioned relative to its closest positioned ancestor if at all there is no relative element the ancestor would be its body tag, Simply the position: relative property Is applied to its body. Its position is determined by the classes like top, bottom, left, and right for offset.

Approach: Here the position absolute element is removed from the document flow other elements on the page are affected by it.

Syntax:

.parent_classname{
    position:relative;
}
.child_classname{
    position:absolute;
}

Example 1: Here we apply the position of absolute property to the first child. (child_one) and second.child

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
 
    <title>
        How to Set Position Absolute but
        Relative to Parent in CSS ?
    </title>
    <!-- inline CSS -->
    <style>
        .parent {
            position: relative;
        }
 
        .child_one {
            position: absolute;
            background-color: black;
            width: 25vw;
            height: 30vh;
        }
 
        .child_two {
            background-color: bisque;
            position: absolute;
            cursor: pointer;
        }
 
        p {
            color: white;
            font-size: large;
            font-weight: bold;
        }
 
        .main {
            font-weight: bolder;
            font-size: xx-large;
            color: darkgreen;
        }
    </style>
</head>
 
<body>
    <div class="parent">
        <div class="child_one">
            <p>
                hello programmer Welcome to GFG
            </p>
        </div>
        <div class="child_two">
            <p class="main">
                GeekForGeeks
            </p>
        </div>
    </div>
</body>
</html>

Output: When the position absolute property is applied to the second child it is overlayed on the other element in the top left corner, which is not in the document flow

Approach: For your better understanding, we added extra properties as a child: hover

Syntax:

.parent_class {
      position: relative;
}

.child_one:hover {
      position: absolute;
      cursor: pointer;
}

.child_two {
      background-color: bisque;
      position: absolute;
      cursor: pointer;
}

Example 2: In this example, we are using child:hover property

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>
        How to Set Position Absolute but
        Relative to Parent in CSS ?
    </title>
    <!-- inline CSS -->
    <style>
        .parent {
            position: relative;
        }
 
        .child_one {
            background-color: black;
            width: 30vw;
            height: 40vh;
        }
 
        .child_one:hover {
            position: absolute;
            cursor: pointer;
        }
 
        .child_two {
            background-color: bisque;
            position: absolute;
            cursor: pointer;
        }
 
        p {
            color: white;
            font-size: large;
            font-weight: bold;
        }
 
        .main {
            font-weight: bolder;
            font-size: xx-large;
            color: darkgreen;
        }
    </style>
</head>
 
<body>
    <div class="parent">
        <div class="child_one">
            <p>
                hello programmer Welcome to GFG
            </p>
        </div>
        <div class="child_two">
            <p class="main">
                GeekForGeeks
            </p>
        </div>
    </div>
</body>
</html>