div、divのCSS配置

Question

複数のdivを相互に配置する方法を知りたいと思います。

私はposition: absoluteで試しましたが、これにより、コンテナdivの高さを明示的に指定する必要があります。これはやりたくありません。

Answer 1

どのように正確に配置したいですか？

divの場合は、デフォルトでposition: staticとなります。 position：absoluteを使用したくない場合は、負のマージンを使用できます。これは推奨される解決策ではありませんが、ハックは間違いなく機能します。必要な場合は、％のマージンを使用することができますが、％のマージン特性は、常に親ブロックWIDTHの割合になります

.d1 { 
 
    background-color: red; 
 
    height: 200px; 
 
    width: 150px; 
 
} 
 

 
.d2 { 
 
    background-color: blue; 
 
    height: 150px; 
 
    width: 100px; 
 
    margin-top: -100px; 
 
}

<div class="d1"></div> 
 
<div class="d2"></div>

注意。だからそれには注意してください。

NB：間違いを修正するための@Oriolへのタンク。私は彼の助言のおかげで私の答えを編集しました。

Answer 2

あなたが達成しようとしていることはわかりませんが、そのようなものが役に立つと思うシナリオは1つしか想像できません。つまり、複数のdivを切り替えます。その場合は、現在のdiv以外のすべてでdisplay:noneを使用してください。

とにかくchild divはデフォルトで親divと「重複」していますので、兄弟同士を「お互いに」したいと思っていると思います。

これを実行する唯一の方法は、絶対マージンと相対的な配置です（マイナスマージンハックを除く）。

#foo{ 
    background-color:red; 
    height: 50px; 
    width: 50px; 
    position: relative; 
} 
#bar{ 
    background-color:blue; 
    height: 50px; 
    width: 50px; 
    position: absolute; 
} 
#foobar{ 
    background-color: green; 
    height: 50px; 
    width: 50px; 
    position: absolute; 
} 
#raboof{ 
    background-color: yellow; 
    height: 50px; 
    width: 50px; 
} 

---

<div id="foo"> 
    <div id="bar"></div> 
    <div id="foobar"></div> 
    <div id="raboof"></div> 
</div> 

Jsfiddle：1.あなたはしかし、最後の子は絶対に配置する必要はありません可能性がありますhttps://jsfiddle.net/t81hvsa1/

ことを覚えておいてください

ここで方法です。 2.最後に絶対的に配置された子供は常に上になります。

編集：私はちょうど気づいた、this question's discussionあなたが望むことができるすべての答えがあります。より洗練され、より良いフォーマットになっています。