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)
There are several ways to position an HTML block.
If you position it as `fixed` then it will ignore other blocks and position itself in the browser window.
If you position it as `static` (or don't position it at all, 'cause that is the default) then it will move along the flow of the page.
If you position it as `relative`, then you're moving it from its "normal" place (according to the page's flow).
If you position it as `absolute`, then you're positioning it relative to its closest ancestor which is `fixed` or `relative`...

Clearly, nothing can be `absolute` and `relative` at the same time. Either you want the element to position itself based on another ancestor's position or based on the page flow. I fail to see how it can be both.