<!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: lightpink; 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> <!-- 定位 1.相对定位：相对于原本的位置（依然会占据原来的空间）8像素 2.绝对定位：相对于离他最近的已定位父级定位（html）已定位（该父级没定位就往上一层一层找） 3.固定定位：相对于浏览器定位 --> </body> </html>
相对定位：
页面效果如下
1.相对定位：相对于原本的位置（依然会占据原来的空间）8像素
如果不加
position: relative;
效果如下
但是有8px的间距
检查如下
如图所示 8px是固定的Margin造成的
绝对定位
页面效果如下
2.绝对定位：相对于离他最近的已定位父级定位（html）已定位（该父级没定位就往上一层一层找）
绝对路径此时div jueDui离他最近的父元素是body
但是body没有进行定位
那就
一层一层的往上找
最后是根据浏览器绝对定位
而div jueDui 和 div xiangDui 为什么不重合呢？
解释如下
如图
如图所示 8px是固定的Margin造成的
所以不重合
相对定位不会脱离原先的文档流 只要不默认margin为0 相对定位会一直多出8px
固定定位
代码如下
#guDing{
background: lightblue;
position: fixed;
left: 200px;
top: 200px;
}
3.固定定位：相对于浏览器定位
页面效果如下
