Question

I’m trying to make two squares overlap eachother in a parent div. The squares are using position:inherit. Please note that the number of squares will be dynamic. Also note that the parent div is using margin-left: 30%. Is this possible?

<div style="border: 1px solid Black; width: 300px; height:300px; margin-left:30%;">
    <div style="height:40px; width:40px; border: 1px solid Black; position:inherit; left:0px; top: 0px;"></div>
    <div style="height:40px; width:40px; border: 1px solid Black; position:inherit; left:0px; top: 0px;"></div>
</div>​

http://jsfiddle.net/AzYUn/1/

Answer 1

Get rid of the position: inherit; and use position: relative;.

Using the top, right, bottom and left properties you can move an element and making it overlap.

CSS

div.parent {
    border: 1px solid black;
    margin-left: 30%;
    height: 300px;
    width: 300px;
}

div.parent > div.box {
    height:40px;
    width:40px;
    border: 1px solid black;
}

div.parent > div.box.overlap {
    position: relative;
    top: -40px;
}

HTML

<div class="parent">
    <div class="box"></div>
    <div class="box overlap"></div>
</div>​