0

親divで2つの正方形を互いに重ね合わせようとしています。正方形は 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/

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 に答える