<!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.固定定位：相對於瀏覽器定位
頁面效果如下
