關於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: 700px;
height:500px;
background-color:blue;
margin:200px auto;
}
.father
{
width:200px;
height:100px;
background-color:red;
}
.son
{
width:50px;
height:50px;
background-color:green;
}
</style>
</head>
<body>
<div class="grandFather" >
<div class="father">
<div class="son"></div>
</div>
</div>
</body>
</html>
如圖,我們聲明瞭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只會造成頁面結構的混亂