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

Question

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 1

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