html - 位置 : inherit with overlap possible?

Question

我试图让两个正方形在父 div 中相互重叠。正方形使用位置:继承。请注意，方 block 的数量是动态的。另请注意，父 div 使用 margin-left: 30%。这可能吗？

<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

去掉 position: inherit; 并使用 position: relative;。

使用 top、right、bottom 和 left 属性，您可以移动元素并使其重叠.

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>​