關於position:relative absolute fixed定位和佈局的踩坑心得
position屬性介紹
absolute
顧名思義，這是絕對定位的意思，我們在使用時通常都是給元素聲明瞭position:absolute屬性，然後再用top,left,right,bottom屬性去改變元素的位置，語法示例如下：
position:absolute;
top:10px;
該語句設定了定位方式為absolute,並且向下偏移了10px
relative
relative是相對定位的意思，用來給父元素新增參考點，語法例項如下：
position:relative;
踩坑心得
我原先的錯誤想法是，absolute只能相對於瀏覽器進行定位，relative只能相對於自己本身的位置進行定位
然而實際情況是，relative 是給自己的子元素設定了一個參考點，子元素使用absolute進行定位的時候，會一層一層地向上去找自己的父元素中有沒有設定position:relative屬性的父元素，如果找到了，那麼所有的偏移量例如top:10px這種都是相對於父元素的位置來進行偏移，如果自己的所有父元素都沒有設定position:relative,那麼absolute定位的時候會相對於根元素也就是body元素來進行偏移
說的有些複雜，我們來看幾個例子：
<html>
<head>
<style>
.grandFather
{
width: 如圖，我們聲明瞭3個巢狀的div，按父元素到子元素的順序分別取名為爺爺、爸爸、兒子，尺寸分別為700x500,200x100,50x50，設定了三個顏色之後，並且我們為了實驗的效果，用margin屬性將div的位置調到了瀏覽器的居中位置，效果如下：
現在，我們給兒子設定一個position:absolute;再讓他top:30px來進行向下30px的偏移
top:30px;
我們發現，兒子並沒有相對於爸爸或者爺爺向下偏移30px，而是相對於瀏覽器的根元素body向下偏移了30px，但是如果我們此時設定了爸爸具有position:relative屬性
.father
{
width:200px;
height:100px;
background-color:red;
position:relative;
}
可見，兒子向上找到了relative的爸爸，然後相對於爸爸的位置向下偏移了30px
如果我們把爸爸的relative去掉，設定爺爺為relative
.grandFather
{
width:700px;
height:500px;
background-color:blue;
margin:200px auto;
position:relative;
}
可以發現，兒子仍然來到了剛才的位置，由此可見，兒子向上找，發現爸爸不是relative，再向上找，發現爺爺是relative，從而以爺爺的位置作為參考進行了偏移，只不過由於我們的爸爸和爺爺的起始位置一樣，才造成了相同的效果
總結與心得
position的relative和absolute屬性要搭配來用，但是當我們佈局的時候，儘量不要用position屬性來進行定位，用position確實爽，能霸道地直接把元素移動到瀏覽器顯示區域的任何位置，但是這破壞了網頁設計的佈局巢狀，而且你會發現，用position霸道的改動位置設計出的佈局，在瀏覽器放大縮小的時候，元素就全都亂套了，發生很多錯位現象。我們在網頁的佈局時了，最基本的margin，float一些屬性已經可以應付90%的佈局情況了，能不用position就不用position，當我們想要耍無賴的時候，比如在頁面滾動的時候，始終在瀏覽器的固定位置顯示一個廣告視窗（用position:fixed來實現），或者在點選元素跳出彈窗遮蓋其他頁面元素只允許在彈窗上操作時（用positionLabsolute實現），才會用到position屬性，否則，濫用position只會造成頁面結構的混亂