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: 
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**](http://codepen.io/Paulie-D/pen/ZpZNpV)
If you require some benefit of absolute positioning (to escape an ancestors overflow for example) but also take up space in the page flow, one trick I use is to duplicate the content inline but then set 'visibility: hidden;' on the inline content so only the absolute item is visible.