38557


**前提HTML**

[code]

    <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>
    
[/code]

* * *

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

[code]

    #three { 
      position: absolute; 
    }
    
[/code]


CC BY-SA 3.0
2017-10-10T03:56:29.337
38556
2017-10-10T04:34:22.303
7886
question
css
position:absolute;でtop及びleft未指定時の挙動について(初期値は？)


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


CC BY-SA 3.0
2017-10-10T04:34:22.303
38557
2017-10-10T04:34:22.303
4236
38556
answer