在css眾多屬性中，定位position屬性，必須有姓名，而且占據(jù)了比較重要的地位，比如：二級，三級導航效果，鼠標懸停的一些動態(tài)效果，懸停欄，側(cè)邊導航欄定位效果等等都是需要定位實現(xiàn)的。
但是很多小伙伴，剛接觸定位的時候，理解上會有一些困惑，使用上容易出bug，那我們今天就來聊一下定位position屬性;
1、定位的歷史
W3C(萬維網(wǎng)聯(lián)盟)組織于1998年5月發(fā)布了CSS2版本，CSS2規(guī)范在很大程度上擴展了CSS1中的內(nèi)容。它包括數(shù)十種新的屬性(和偽元素)，以及現(xiàn)有屬性的很多附加值，其中就包括 定位屬性。
2、瀏覽器的支持
所有主流瀏覽器都支持 position 屬性。
3、position屬性的語法
position 屬性：規(guī)定元素的定位類型
屬性值：
static：默認值。沒有定位，元素出現(xiàn)在正常的流中。
relative：生成相對定位的元素，相對于其正常位置進行定位。
fixed: 生成絕對定位的元素，相對于瀏覽器窗口進行定位。
absolute: 生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。
sticky (css3中新增的屬性值): 粘性定位，該定位基于用戶滾動的位置。
4、定位需要配合使用的屬性
left 屬性:規(guī)定元素的左邊緣偏移的大小。
right 屬性規(guī)定元素的右邊緣偏移的大小。
top 屬性規(guī)定元素的頂部邊緣偏移的大小。
bottom 屬性規(guī)定元素的底部邊緣偏移的大小。
以上屬性用于給元素定位設置坐標點的位置;
屬性值：
auto： 默認值。通過瀏覽器計算左邊緣的位置。
%： 設置以包含元素的百分比計的左邊位置?？墒褂秘撝?。
length： 使用 px、cm 等單位設置元素的左邊位置?？墒褂秘撝怠?/p>
5、了解編程中的坐標
· 編程中的坐標，x軸-水平軸右為正，左為負，Y軸-垂直軸下為正，上為負
· 每個元素都自帶一個坐標系，元素左上角的位置為原點(0)位置，如下圖所示
6、 分別介紹定位屬性每個屬性值的使用語法
· position:static 靜態(tài)定位
position屬性的默認值，即沒有定位，遵循正常的文檔流對象。
遵循正常的文檔流對象，可以理解為，元素的位置根據(jù)在html中的書寫順序依次排序顯示，沒有特殊的位置改變
· position:relative 相對定位
生成相對定位的元素，相對于其正常位置進行定位。
基本使用講解：
例如：一個img元素在沒有設置定位時，正常顯示在瀏覽器中，自帶坐標系，
如圖顯示;
給img元素設置相對定位，設置定位的坐標為(100px,100px)，美女的位置會從原本原點的位置移動到(100px,100px)的位置，會發(fā)生如下變化：
代碼實現(xiàn)如下：
相對定位對元素在文檔流中的影響
元素仍然保持其未定位前的形狀，它原本在文本流中所占的空間仍保留
例如：在img標簽下面書寫一個span標簽，img在定位之后，原本的位置空間依舊是保留在文本流中的，寫在img下面的span是沒有上去的;
代碼實現(xiàn)如下：
效果如下：
· position: absolute 絕對定位
生成絕對定位的元素，相對于static定位以外的第一個父元素進行定位。
解釋：指絕對定位元素會根據(jù)有定位設置(除static定位)的父元素作為參照進行定位;如果父元素沒有定位設置，那就繼續(xù)向上找祖父元素，看是否有定位設置，有的話就根據(jù)祖父元素定位，沒有的話，那就繼續(xù)向上找…….如果都沒有，就根據(jù)html進行定位。
包含塊：絕對定位元素參照的有定位設置的父元素我們稱為包含塊，包含塊是絕對定位的基礎，包含塊就是為絕對定位元素提供坐標偏移和顯示范圍的參照物;
設置某個元素為包含塊：給此元素添加relative，fixed，absolute都可，推薦使用relative，因為不會影響元素在文本流中的顯示;
總結(jié)元素絕對定位三部曲：
· 先確定其包含塊
· 設置元素絕對定位
· 定位的位置
基本使用講解：
例如：img元素放在div中，沒有設置定位效果
代碼實現(xiàn)如下：
HTML:
CSS：
div {
width: 400px;
height: 400px;
border: 10px dashed coral;
margin: 100px;
}
顯示效果如下：
然后給圖片設置絕對定位，代碼如下：
img {
position: absolute;
left: 0;
top: 0;
}
分析：img的父元素是div，從上述代碼中，可以看出div沒有定位設置，不能作為img的包含塊，一依次向上是body，body也沒有定位設置，再向上就是html，所以img會根據(jù)html進行定位，定位到離包含塊左邊0，上邊0的位置定位，也就是左上角位置;
效果如下：
如果想讓img根據(jù)div盒子進行定位，div需要有除static之外的定位設置;成為一個包含塊，代碼如下：
div {
width: 400px;
height: 400px;
border: 10px dashed coral;
margin: 100px;
/* position:absolute relative fixed都可以讓一個元素成為包含塊 */
position: absolute;
}
img {
position: absolute;
left: 100px;
top: 100px;
}
效果如下：
絕對定位對元素在文檔流中的影響
給元素設置絕對定位之后，元素原先在正常文檔流中所占的空間會關(guān)閉，就好像該元素原來不存在一樣;
例如：在img下面添加了一個p標簽，并且沒有給img設置絕對定位，此時img和p會根據(jù)書寫順序，從上向下依次顯示，代碼如下：
Html：
Css：
* {
margin: 0;
padding: 0;
}
div {
width: 400px;
height: 400px;
border: 10px dashed coral;
margin: 100px;
}
p {
background: lemonchiffon;
}
效果如下：
當給img設置絕對定位之后，img在正常文檔流中所占的空間會關(guān)閉，img不在占據(jù)原來的空間;p標簽就會當img不存在一樣，顯示在div最開始的位置：
代碼如下：
Html：
Css：
* {
margin: 0;
padding: 0;
}
div {
width: 400px;
height: 400px;
border: 10px dashed coral;
margin: 100px;
/* position:absolute relative fixed都可以讓一個元素成為包含塊 */
position: relative;
}
img {
position: absolute;
left: 100px;
top: 100px;
}
p {
background: lemonchiffon;
}
效果如下：
· 固定定位 position:fixed
生成固定定位的元素，相對于瀏覽器窗口進行定位。
基本使用講解
元素設置固定定位之后，相對窗口進行定位，不會根據(jù)瀏覽器滾動條的滾動而移動位置，代碼如下：
結(jié)構(gòu)：內(nèi)容比較多,讓瀏覽器可以出現(xiàn)滾動條
效果如下：
給圖片添加固定定位;代碼如下：
效果如下：
固定定位對元素在文檔流中的影響
給元素設置固定定位之后，元素原先在正常文檔流中所占的空間會關(guān)閉，就好像該元素原來不存在一樣(參照上圖看效果);
sticky 粘性定位
css3中新增的屬性值，有兼容問題，ie低版本瀏覽器不支持
粘性定位，元素在瀏覽器范圍內(nèi)定位時就像 position:relative; 而當頁面滾動超出目標區(qū)域時，它的定位效果就像 position:fixed;，它會固定在目標位置。
基本語法講解
例如：給img元素設置粘性定位，代碼如下：
css代碼：
效果如下：
元素設置絕對定位、固定定位后，會生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
例如： span默認為行內(nèi)元素，給其設置絕對定位，觀察其生成的塊級框效果，代碼如下：
Html：
Css：
效果如下：
以上是對position屬性語法的基本講解，其實position在實際開發(fā)中，有很多靈活的使用方式，下次我們寫一個比較有趣的案例，給大家展示定位在實際項目中的靈活應用。
京公網(wǎng)安備 11010802030320號