web-dev-qa-db-ja.com

CSSで1つの要素を別の要素に対して相対的に配置する

4つのdivsを別の相対位置に配置したい。長方形divがあり、その角に4つのdivsを挿入します。 CSSには"position:relative"属性がありますが、これはその要素の通常の位置に相対的です。 divsを通常の位置ではなく、別の要素（長方形）に相対して配置したい。私は何をすべきか？

csspositionrelative
44
babak6

要素内で絶対配置を使用することをお勧めします。

これを作成して、少し視覚化できるようにしました。

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

http://jsfiddle.net/wUrdM/

32
Aaron Miler

position: absoluteは、最も近くに配置された祖先、つまりposition: staticではない最も近い親を基準にして、座標によって要素を配置します。

4つのdivをターゲットdiv内にネストし、ターゲットdivにposition: relativeを指定し、他のdivで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;
}

...
37
Blender