位置が異なる3つのdivs

Question

私はHTMLファイルに3つの異なるdivを持っています。私はこのdivを交換位置にあるdiv要素を.secondためにマージンを追加する場合：私は、これはothers.Example影響しなければならない任意のdivを移動したときに、私はwant.But 1 div.Anyoneを移動したい

div { 
 
    width: 200px; 
 
    height: 200px; 
 
    position: absolute; 
 
} 
 

 
.second { 
 
    background: red; 
 
    left: 200px; 
 
    top: 200px; 
 
} 
 

 
.third { 
 
    background: green; 
 
    top: 400px; 
 
    left: 400px; 
 
} 
 

 
.first { 
 
    background: yellow; 
 
}

<div class="first"></div> 
 
<div class="second"></div> 
 
<div class="third"></div>

ページフロー。このエフェクトを第1、第3のdivにしたいのですが、どうすればいいですか？

予想される出力：

Answer 1

CSS position:absoluteの目的は、余白やサイズを変更すると、その周りに他の要素に影響を与えないように、文書の流れから要素を削除することです。

あなたの<div>のではなく、（より強力なソリューションのためか、flexbox）float:leftを使用してposition:absolute試みを使用しての、他のdivの余白によって影響を受けることにしたい場合。

Answer 2

代わりのposition: absoluteそれはrelative

なりましょうCodePen Exampleで、これはあなたの問題を解決するかどうか

div { 
    width: 200px; 
    height: 200px; 
    /* position: absolute; */ 
} 

.second { 
    background: red; 
    margin-left: 200px; 
} 

.third { 
    background: green; 
    margin-left: 400px; 
} 

.first { 
    background: yellow; 
} 

HTMLの外観を持っている：私はこれを正しく理解していれば、

<div class="first"></div> 
<div class="second"></div> 
<div class="third"></div> 

Answer 3

をあなたは3つすべての部門にマージンを追加したいですか？

私たちは、それらをコンテナの中に入れておくことができます。

<div class="container"> 
    <div class="first"></div> 
    <div class="second"></div> 
    <div class="third"></div> 
</div> 

さらに、containerクラスに余白を追加します。

.container { 
    margin: 10px 
} 

ワーキングJSFiddle：https://jsfiddle.net/pcyq20vx/