Css fixed和absolute定位差別
fixed:固定定位
absolute:絕對定位
差別非常easy：
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>
效果例如以下：當滾動欄下拉時，absolute層會上移。fixed層不動
Css fixed和absolute定位差別