Search code examples
htmlcsscss-position

How to make an element have a position of both relative and absolute?

So I have a parent element with a child element and the child element is the parent element of a child element like this:

<div class="father">

    <div class="child">
        
        <div class="child-of-child"></div>


    </div>
    
</div>

And CSS like this:

.father{
    position: relative;
}

.child{
    position: absolute;
}

.child-of-child{
    position: absolute;
}

But I want the div named child to be position: absolute; to the father like it is now, and I also want it to be position: relative; to the div named child-of-child so that I can move the child-of-child inside child

Solution

  • Provided that the .child is absolutely positioned, any .child-of-child can be absolutely positioned in relation to the .child. This means that the .child does not need to be given position: relative for the .child-of-child to be absolutely positioned with respect to it.

    You can confidently use your CSS.