4 つの s を別の s に対して配置したいdiv
。四角形があり、その角にdiv
4 を挿入したい。div
CSS に属性があることは知っています"position:relative"
が、これはその要素の通常の位置に相対的です。div
s を通常の位置に対してではなく、別の要素 (長方形) に対して相対的に配置したい。私は何をすべきか?
質問する
179802 次
2 に答える
71
position: absolute
最も近い位置にある祖先、つまりそうでない最も近い親を基準にして、座標によって要素を配置しposition: static
ます。
4 つの div をターゲット div 内にネストし、ターゲット div を指定して、他の divposition: relative
で使用position: absolute
します。
HTML を次のように構成します。
<div id="container">
<div class="top left"></div>
<div class="top right"></div>
<div class="bottom left"></div>
<div class="bottom right"></div>
</div>
そして、この CSS は動作するはずです:
#container {
position: relative;
}
#container > * {
position: absolute;
}
.left {
left: 0;
}
.right {
right: 0;
}
.top {
top: 0;
}
.bottom {
bottom: 0;
}
...
于 2012-06-22T06:27:36.613 に答える
43
要素内で絶対配置を使用することをお勧めします。
あなたがそれを視覚化できるように私はこれを作成しました。
#parent {
width:400px;
height:400px;
background-color:white;
border:2px solid blue;
position:relative;
}
#div1 {position:absolute;bottom:0;right:0;background:green;width:100px;height:100px;}
#div2 {width:100px;height:100px;position:absolute;bottom:0;left:0;background:red;}
#div3 {width:100px;height:100px;position:absolute;top:0;right:0;background:yellow;}
#div4 {width:100px;height:100px;position:absolute;top:0;left:0;background:gray;}
<div id="parent">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</div>
于 2012-06-22T06:30:08.923 に答える