CSS Position (定位) 中 absolute、fixed、relative 的理解+實戰
一個完整的頁面是由很多個頁面堆積形成的，如下圖所示。
那麼如何實現頁面的堆積，就需要CSS中position的定位屬性了。
position 屬性指定了元素的定位類型，共有五個值，分別是
點擊上述五個值可直接跳轉到菜鳥教程的CSS Position (定位)篇章。
這裏，我只重點說 absolute、fixed、relative 三個值。
1.absolute
absolute 絕對定位的元素的位置相對於最近的已定位父元素，如果元素沒有已定位的父元素，那麼它的位置相對於<html>。
absolute 定位使元素的位置與文檔流無關，因此不佔據空間。
absolute 定位的元素和其他元素重疊。
2. fixed
fixed元素的位置相對於瀏覽器窗口是固定位置。即使窗口是滾動的它也不會移動。
fixed 定位使元素的位置與文檔流無關，因此不佔據空間。
fixed 定位的元素和其他元素重疊。
我們可以發現 fixed 與 absolute 只是 相對位置 不同。
3.relative
relative相對定位元素的定位是相對其正常位置。
移動相對定位元素，但它原本所佔的空間不會改變。
相對定位元素經常被用來作爲絕對定位元素的容器塊。
4.sticky
參看實例：http://www.runoob.com/try/try.php?filename=trycss_position_sticky 就會一清二楚。
5.static
HTML 元素的默認值，即沒有定位，遵循正常的文檔流對象。
靜態定位的元素不會受到 top, bottom, left, right 影響。
其他四個值則都受 top, bottom, left, right 影響。
實戰
我單獨寫了頁面來展示position的 absolute、fixed、relative 三個值，註釋寫的也很清晰，大家細細看吧，我就不囉嗦了。
vue框架下的完整代碼如下所示：
<template>
<div class="absolute">
<div class="absolute1"><h2 style="padding-left: 20px">absolute1: 第二層</h2></div>
<div class="absolute2"><h2 style="padding-left: 20px">absolute2: 第三層</h2></div>
<div class="fixed"><h2 style="padding-top: 100px;text-align: center">fixed：第四層</h2></div>
<h2 style="padding-left: 20px">absolute: 第一層 ( 這部分的位置按文檔流是在 class="relative" 的區域塊上面，被遮擋了，看不到。) </h2>
<div class="relative">
<div class="absolute3"><h2 style="padding-left: 20px">absolute3：第六層</h2></div>
<div class="absolute4">
<h2 style="padding-left: 20px">absolute4：第七層</h2>
<div class="fixed1"><h2 style="padding-top: 100px;text-align: center">fixed1：第八層</h2></div>
</div>
<!--padding-top:30%是指父元素寬度的30%-->
<h2 style="padding-left: 20px;padding-top: 30%">relative：第五層</h2>
</div>
<h2 style="padding-left: 20px">absolute: 第一層 ( 這部分的位置按文檔流是在 class="relative" 的區域塊下面，被遮擋了，看不到。) </h2>
</div>
</template>
<script>
export default {
name: 'position'
}
</script>
<style scoped>
/* absolute 絕對定位的元素的位置相對於最近的已定位父元素，如果元素沒有已定位的父元素，那麼它的位置相對於<html>。
absolute 定位使元素的位置與文檔流無關，因此不佔據空間。
absolute 定位的元素和其他元素重疊。*/
/* 父元素爲<html> */
.absolute{
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
/* 父元素爲<div class="absolute"> */
.absolute1{
position:absolute;
width: 100%;
height: 500px;
background: #7fffd4;
}
/* 父元素爲<div class="absolute"> */
.absolute2{
position:absolute;
width: 100%;
bottom: 0;
background: #47c1ff;
top: 500px;
}
/* fixed 元素的位置相對於瀏覽器窗口是固定位置。即使窗口是滾動的它也不會移動。
fixed 定位使元素的位置與文檔流無關，因此不佔據空間。
fixed 定位的元素和其他元素重疊。*/
.fixed{
position:fixed;
top:700px;
left:100px;
width: 500px;
height: 260px;
background: #ff2c2c;
}
/* relative 相對定位元素的定位是相對其正常位置。
移動相對定位元素，但它原本所佔的空間不會改變。
相對定位元素經常被用來作爲絕對定位元素的容器塊。*/
/* 父元素爲<div class="absolute"> */
.relative{
position: relative;
width: 1440px;
/* height: 50%是指父元素高度的50% */
height: 50%;
background: #ffffff;
margin: 170px auto;
}
/* 父元素爲<div class="relative"> */
.absolute3{
position:absolute;
/* width: 100%是指父元素寬度的100% */
width: 100%;
height: 200px;
background: #fcff2e;
}
/* 父元素爲<div class="relative"> */
.absolute4{
position:absolute;
/* width: 50%是指父元素寬度的50% */
width: 50%;
/* height: 50%是指父元素高度的50% */
height: 50%;
background: #77ff74;
/* 父元素寬度的25% */
left:25%;
/* 父元素高度的25% */
top:25%;
}
.fixed1{
position:fixed;
top:700px;
right:100px;
width: 500px;
height: 260px;
background: #ff2c2c;
}
</style>
實際頁面共有八層，如下圖所示：
注意:
每一層頁面上顯示的文字與上述代碼是一一對應的。
每一頁面的大小和位置是不一樣的，這是自己設置的，上一層頁面對下一層頁面的覆蓋程度也是不一樣的，如：
- 第二層和第三層完全覆蓋了第一層；
- 第二層和第三層彼此不覆蓋；
- 第四層只覆蓋了第三層它本身的大小；
- 第五層只覆蓋了第四層一個小角。
等。
END