0

我试图让两个正方形在父 div 中相互重叠。方块使用位置：继承。请注意，正方形的数量是动态的。另请注意，父 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/

4

2 回答 2

1

摆脱position: inherit;并使用position: relative;.

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

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>​
于 2012-12-17T09:40:17.237 回答
1

我能想到的唯一方法是使用其他位置值 - 相对甚至绝对来达到该目标。

于 2012-12-17T09:41:38.427 回答