Question

我试图在父div中使两个正方形重叠。正方形使用position：inherit。请注意，正方形的数量将是动态的。另请注意，父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>

Answer 2

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

位置：继承重叠可能吗？

2 个答案: