Anas Houari Anas Houari - 2 months ago 12
CSS Question

how to specify a div's position as absolute and relative at the same time

I'm new here and I want to know how to specify a div's position as absolute and relative at the same time, Because a div can be a child and parent simultaneously .
Thank you for your help

Answer

If the child is positioned absolutely, any grandchild can be again positioned absolutely in relation to the child.

That is, the child does not need to have position:relative for the grandchild to be positioned absolutely in relation to it.

So the child could be considered to have position:absolute for it's own positioning but also "relative" as it also forms the reference point for the positioning of the grandchild.

<div class="parent">
  <div class="child">
    <div class="g-child"></div>
  </div>
</div>

.parent {
  width: 350px;
  height: 350px;
  background: rebeccapurple;
  margin: 1em auto;
 position: relative;
}

.child {
  position: absolute;
  width: 50px;
  height: 50px;
  right: 50px;
  top: 50px;
  background: orange;
}

.g-child {
  position: absolute;
  width: 25px;
  height: 25px;
  background: #f00;
  top:125%;
  right: 0;
}

Codepen demo