2012-06-21 22 views
30

DIVを別のDIVに相対的に配置することは可能ですか?私はこれが参照DIVの中に最初に配置し、position: relativeを使用してこれを行うことができると思います。しかし、私は参照DIVの内容に影響を与えずにこれを行う方法を理解することはできません。どのようにこれを正しく行うことができますか?DIVの位置は別のDIVとの相対位置ですか?

参照:http://jsfiddle.net/CDmGQ

ありがとう! =)

+1

この例では、灰色のdivと赤色のdivの違いは何ですか。 – Rooster

+0

私はその質問を理解していません。あなたは '参照DIVの内容に影響を与えずに何を意味するのですか?'リクエストされた結果のイメージを提供できますか? –

答えて

55

まず、オフセットを指定する(relativeにすなわちleftを親DIVのpositionを設定し、topなど必要ありません)、その後、あなたが欲しいオフセットと子のDIVにposition: absoluteを適用します。
これは簡単なことであり、トリックもうまくやる必要があります。

+9

[例](http://jsfiddle.net/CDmGQ/2/) –

+0

これは、ありがとう! :)私はあなたの答えをできるだけ早く受け入れます。 – Nathanael

+1

私のために働かない。これは、パディングやマージンを追加して、最初のdivの下に2番目のdivを配置する場合にのみ機能します。 –

1

position: absoluteを他のdivの中に入れて使用します。

DEMO

+0

'position:absolute'だけでは動作しません。指定されたオフセットは、(少なくとも提供したデモでは)親divではなく、ドキュメントの本文を参照します。私の答えを見てください。 – rhino

4

あなたはpostion設定する必要があります。外側のDIVと位置の相対:内部のdivの絶対に。
これを試してください。ここでDemo

#one 
{ 
    background-color: #EEE; 
    margin: 62px 258px; 
    padding: 5px; 
    width: 200px; 
    position: relative; 
} 

#two 
{ 
    background-color: #F00; 
    display: inline-block; 
    height: 30px; 
    position: absolute; 
    width: 100px; 
    top:10px; 
}​ 
0

あなたは#two divの内側に#one divの内側position:relative;position:absoluteを使用することができます。 you can see it

関連する問題