Question: Simple question, hard answer to find.

So I have 3 div's.

```
    <div style="position: relative;" class="div-1">

        <div style="position: relative;" class="div-2">

            <div style="position: absolute;" class="div-3">

                Target Div-1's position relative.

            </div>

        </div>

    </div>

```

The third div is absolute positioned, but it targets the direct parent: div-2. I want it to target div-1. How can I achieve such thing?

Answer: 
The [**MDN's docs on POSITION**](https://developer.mozilla.org/en-US/docs/Web/CSS/position) states:

> 
> **absolute**  
> 
>  Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor or to the containing block. Absolutely positioned boxes can have margins, they do not collapse with any other margins.
> 
> 
> 

So, the answer is not hard to find... It can't be done in this structure.

The only way would be if the closest positioned element was the first div:

```
<div style="position: relative;" class="div-1">
    <div class="div-2">
        <div style="position: absolute;" class="div-3">
            Target Div-1's position relative.
        </div>
    </div>
</div>

```

If you cannot change the HTML, maybe override it with the css class:

```
.div-2 { position: initial !important; }

```
Because div-2 is relative, the third div will absolute position itself relative to its parent container. If you want to position it relative to div-1, you will need to move it out of div-2 and into div-1.

Remember that when you absolute-position an element, it will not displace its sibling elements, so the positioning of div-2 will not be affected by making div-3 its sibling as long as div-3 is absolute positioned.