fixed和absolute定位區別
ixed:固定定位
absolute:絕對定位
區別很簡單：
1、沒有滾動條的情況下沒有差異
2、在有滾動條的情況下，fixed定位不會隨滾動條移動而移動，而absolute則會隨滾動條移動
可以這麽理解，fixed：固定在當前window不動， absolute：會隨參照對象元素的高度和寬度變化而變化
一般fixed用在遮蓋層和固定在頁面某個位置，如固定在頂端的菜單欄，又如彈出提示框居中顯示
下面例子可是簡單測試兩者之間的區別，註意拖動滾動條看差異
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
body {
height:1000px;/*讓窗體出現滾動條*/
}
.fixed {
position: fixed;
left: 100px;
right: 100px;
top: 100px;
bottom: 100px;
width: auto;
height: auto;
border: 1px solid blue;
}
.absolute {
position: absolute;
left: 100px;
right: 100px;
top: 100px;
bottom: 100px;
width: auto;
height: auto;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="fixed">fixed定位</div>
<div class="absolute">absolute定位</div>
</body>
</html>
---------------------
作者：peachesTao
來源：CSDN
原文：https://blog.csdn.net/taoerchun/article/details/47811783
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！
fixed和absolute定位區別