How do I absolutely position a relatively positioned element?

Profile picture for Eden Landau
Eden Landau

Let's say I have a container, and that I want to put this one container into yet another container that's also full of other stuff. The CSS code might look something like this:

<!-- language: lang-css --> 
.parent-container {
    width: 100%;
    position: relative;
}
.child-container {
    width: 600px;
    position: absolute;
    left: 25px;
    bottom: 100px;
}

However, .child-container also includes absolutely positioned elements, which are position relatively to .parent-container because .child-container doesn't have position: relative. So my question is, how can I position .child-container's children relatively to itself, while still keeping it correctly positioned in .parent-container?

P. S. Wrapping .child-container in a position: absolute'd div and making .child-container position: relative should do the trick, but I was hoping for something more... semantic.

Absolutely positioned elements should already be relative to their parent. Here's a demo which shows nested items within absolute positioning

HTML

<!-- language: lang-html --> 
<div class='parent-container'>
    Parent
    <div class='child-container'>
        1st Child
        <div class='grandchild-container'>
            2nd Child
        </div>
    </div>
</div>

CSS (color added to illustrate differences)

<!-- language: lang-css --> 
.parent-container {
    position: relative;
    background: grey;
}
.child-container {
    position: absolute;
    background: red;
    left: 20px;
}
.grandchild-container {
    position: absolute;
    background: yellow;
    left: 20px;
}

jsFiddle

It will look like this

demo *Notice each position is relative to its parent.

For more info see: