0

前提HTML

<style>
.box { 
  background: red; 
  margin: 20px; 
}
</style>
<div class="box">One</div>
<div class="box">Two</div>
<div class="box" id="three">Three</div>
<div class="box">Four</div>

下記追記すると、「Four」が「three」の上へ移動して、「three」の位置がズレるのですが、なぜですか?
・「three」位置はどういうロジック??

#three { 
  position: absolute; 
}

1 件の回答 1

2

position: absolute;が指定されるとその要素が存在しなかったものとして以降の要素が配置されます。結果としてThreeとFourは重なります。しかし、Fourはmargin相殺により20px上に配置されるため、Threeが下にずれたような印象を受けます。padding: 20pxと比較したり、margin-topmargin-bottomを異なる値にするとわかりやすいかと思います。

0

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。