html中的定位

1static(默认)

当你没有为一个元素(例如div)指定定位方式时，默认为static，也就是按照文档的流式(flow)定位，将元素放到一个合适的地方。所以在不同的分辨率下，采用流式定位能很好的自适应，取得相对较好的布局效果。

一般来说，我们不需要指明当前元素的定位方式是static——因为这是默认的定位方式。除非你想覆盖从父元素继承来的定位系统。

left,top属性对static没有效果，static是靠margin这些定位的。

2.固定定位 fixed 相对于浏览器定位
3.相对定位 relative 不会脱离原本的文档流相对于选本的位置会占用原来的空间
4.绝对定位 absolute相对于离他最近的已定位父级进行定位
先用相对定位写一个盒子内容用绝对定位

使用absolute定位后，定位元素是脱离文档流的，这时候父级会检测不到定位元素的宽高

文档流：文档流是文档中可显示对象在排列时所占用的位置。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
        body{
            height: 10000px;
        }
        div{
            width: 100px;
            height: 100px;
        }
        #guDing{
            background: lightblue;
            position: fixed;
            left: 500px;
            top: 200px;
        }
        #xiangDui{
            background: lightcoral;
            position: relative;
            left: 100px;
            top: 100px;
        }
        #jueDui{
            background: lightgreen;
            position: absolute;
            left: 100px;
            top: 100px;
        }
        
    </style>
</head>
<body>
    
<div id="guDing"></div>
<div id="xiangDui"></div>
<div id="jueDui"></div>

</html>

运行此段代码会发现第2个和第3个盒子只有定位方式不同但是两个盒子会有8个像素的错位

8个像素的差值的原因是

jueDui定位的盒子与ziangDui定位的盒子不完全重合，他俩之间有8个像素的错开的原因因为
第2个盒子是相对定位默认的位置是再浏览器的左上角属于body里的相当于body定位但是再body中会有默认的8个像素
第三个盒子绝对定位相对于离他最近的已定位父级进行定位
并且绝对定位最近的父级是body 但是body没有定位所以再往上移动一个父级 body的上一个父级为html 所以第3个盒子的定位是浏览器的界面

html没有8个像素的maigin body中有8个像素的margin