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