（注1：如果有問題歡迎留言探討，一起學(xué)習(xí)桅滋！轉(zhuǎn)載請注明出處慧耍，喜歡可以點(diǎn)個贊哦！）
（注2：更多內(nèi)容請查看我的目錄丐谋。）
1. 簡介
在絕對定位模型中芍碧，盒根據(jù)其包含塊顯式偏移。盒從標(biāo)準(zhǔn)流中完全脫離（對后來的同胞元素沒有影響）笋鄙。絕對定位盒為其標(biāo)準(zhǔn)流的子元素和絕對定位（非固定定位）后代創(chuàng)建新的包含塊师枣。然而，絕對定位元素的內(nèi)容不在任何其他盒的流中萧落，它們可能遮擋其他盒的內(nèi)容（或被遮擋）践美，這取決于重疊盒子的堆疊層級stack levels 。
2. 固定定位 Fixed positioning
固定定位是絕對定位的子類找岖。唯一的區(qū)別在于陨倡，固定定位盒的包含塊是由視口創(chuàng)建的。在連續(xù)媒體中许布，當(dāng)文檔滾動時兴革，固定盒不會移動。就這點(diǎn)來講蜜唾，它們同固定背景圖片fixed background images相像杂曲。在分頁媒體paged media中，固定定位盒在每一頁重復(fù)袁余。這對布局很有用擎勘，比如，在每個頁面的底部放置簽名颖榜。比頁面區(qū)域要大的固定定位盒將會被裁剪棚饵。固定定位盒在初始化包含塊中不可見的部分將不會打印煤裙。
開發(fā)者可以使用固定定位去創(chuàng)建框架式frame-like布局≡胙考慮如下框架布局：
這可以通過如下HTML文檔和樣式規(guī)則實(shí)現(xiàn)：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>A frame document with CSS 2.1</title>
<style type="text/css" media="screen">
body { height: 8.5in }/* 計(jì)算百分百高度需要 */
#header {
position: fixed;
width: 100%;
height: 15%;
top: 0;
right: 0;
bottom: auto;
left: 0;
}
#sidebar {
position: fixed;
width: 10em;
height: auto;
top: 15%;
right: auto;
bottom: 100px;
left: 0;
}
#main {
position: fixed;
width: auto;
height: auto;
top: 15%;
right: 0;
bottom: 100px;
left: 10em;
}
#footer {
position: fixed;
width: 100%;
height: 100px;
top: auto;
right: 0;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div id="header"> ... </div>
<div id="sidebar"> ... </div>
<div id="main"> ... </div>
<div id="footer"> ... </div>
</body>
</html>
參考
https://www.w3.org/TR/CSS22/visuren.html#visual-model-intro
https://www.w3.org/TR/CSS2/visuren.html
CSS規(guī)范 > 9 視覺格式化模型 Visual Formatting Model
