How to Set Absolute Positioning Relative to the Parent Element

Solution with the CSS position property

It is possible to set absolute positioning of a child element relative to the parent container. For that, you must specify the position property with its “relative” value on the parent element. If we don’t specify the position of the parent element, the child <div> will be positioned relative to the page.

Example of setting absolute positioning of the child element relative to the parent:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .parent {
        width: 200px;
        height: 200px;
        background-color: #8ae6a2;
        position: relative;
      }      
      .child {
        width: 100px;
        height: 100px;
        background-color: #93a398;
        position: absolute;
        bottom: 0px;
        right: 0px;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="child"></div>
    </div>
  </body>
</html>

Try it Yourself »

Result

In the example above, the child <div> element is positioned at the bottom right of its parent. So, we set the position to “absolute” for the child element and “relative” for the parent container. Then, we specified the bottom and right properties to align the child to the bottom right.

Let’s see another example.

Example of setting absolute positioning of a child element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .largerBox {
        width: 250px;
        height: 250px;
        background-color: #c3c9c5;
        position: relative;
      }      
      .parent {
        width: 170px;
        height: 170px;
        background-color: #7a7a7a;
        position: absolute;
        bottom: 0px;
      }      
      .child {
        width: 90px;
        height: 90px;
        background-color: #fff;
        position: absolute;
        right: 0px;
        top: 0px;
      }
    </style>
  </head>
  <body>
    <div class="largerBox">
      <div class="parent">
        <div class="child"></div>
      </div>
    </div>
  </body>
</html>

Try it Yourself »