html - How do I absolutely position a relatively positioned element? -

let's have container, , want put 1 container yet another container that's full of other stuff. css code might this:

.parent-container {     width: 100%;     position: relative; } .child-container {     width: 600px;     position: absolute;     left: 25px;     bottom: 100px; } 

however, .child-container includes absolutely positioned elements, position relatively .parent-container because .child-container doesn't have position: relative. question is, how can position .child-container's children relatively itself, while still keeping correctly positioned in .parent-container?

p. s. wrapping .child-container in position: absolute'd div , making .child-container position: relative should trick, hoping more... semantic.

absolutely positioned elements should already relative parent. here's demo shows nested items within absolute positioning

html

<div class='parent-container'>     parent     <div class='child-container'>         1st child         <div class='grandchild-container'>             2nd child         </div>     </div> </div> 

css (color added illustrate differences)

.parent-container {     position: relative;     background: grey; } .child-container {     position: absolute;     background: red;     left: 20px; } .grandchild-container {     position: absolute;     background: yellow;     left: 20px; } 

jsfiddle

it this

*notice each position relative parent.

for more info see:

• positioning - w3schools
• position - mozilla developer network