在css眾多屬性中，定位position屬性，必須有姓名，而且占據(jù)了比較重要的地位，比如：二級(jí)，三級(jí)導(dǎo)航效果，鼠標(biāo)懸停的一些動(dòng)態(tài)效果，懸停欄，側(cè)邊導(dǎo)航欄定位效果等等都是需要定位實(shí)現(xiàn)的。

　　但是很多小伙伴，剛接觸定位的時(shí)候，理解上會(huì)有一些困惑，使用上容易出bug，那我們今天就來(lái)聊一下定位position屬性;

　　1、定位的歷史

　　W3C(萬(wàn)維網(wǎng)聯(lián)盟)組織于1998年5月發(fā)布了CSS2版本，CSS2規(guī)范在很大程度上擴(kuò)展了CSS1中的內(nèi)容。它包括數(shù)十種新的屬性(和偽元素)，以及現(xiàn)有屬性的很多附加值，其中就包括 定位屬性。

　　2、瀏覽器的支持

　　所有主流瀏覽器都支持 position 屬性。

　　3、position屬性的語(yǔ)法

　　position 屬性：規(guī)定元素的定位類型

　　屬性值：

　　static：默認(rèn)值。沒(méi)有定位，元素出現(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)值。通過(guò)瀏覽器計(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è)屬性值的使用語(yǔ)法

　　· position:static 靜態(tài)定位

　　position屬性的默認(rèn)值，即沒(méi)有定位，遵循正常的文檔流對(duì)象。

　　遵循正常的文檔流對(duì)象，可以理解為，元素的位置根據(jù)在html中的書(shū)寫(xiě)順序依次排序顯示，沒(méi)有特殊的位置改變

　　· position:relative 相對(duì)定位

　　生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。

　　基本使用講解：

　　例如：一個(gè)img元素在沒(méi)有設(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)簽下面書(shū)寫(xiě)一個(gè)span標(biāo)簽，img在定位之后，原本的位置空間依舊是保留在文本流中的，寫(xiě)在img下面的span是沒(méi)有上去的;

　　代碼實(shí)現(xiàn)如下：

　　效果如下：

　　· position: absolute 絕對(duì)定位

　　生成絕對(duì)定位的元素，相對(duì)于static定位以外的第一個(gè)父元素進(jìn)行定位。

　　解釋：指絕對(duì)定位元素會(huì)根據(jù)有定位設(shè)置(除static定位)的父元素作為參照進(jìn)行定位;如果父元素沒(méi)有定位設(shè)置，那就繼續(xù)向上找祖父元素，看是否有定位設(shè)置，有的話就根據(jù)祖父元素定位，沒(méi)有的話，那就繼續(xù)向上找…….如果都沒(méi)有，就根據(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中，沒(méi)有設(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沒(méi)有定位設(shè)置，不能作為img的包含塊，一依次向上是body，body也沒(méi)有定位設(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)閉，就好像該元素原來(lái)不存在一樣;

　　例如：在img下面添加了一個(gè)p標(biāo)簽，并且沒(méi)有給img設(shè)置絕對(duì)定位，此時(shí)img和p會(huì)根據(jù)書(shū)寫(xiě)順序，從上向下依次顯示，代碼如下：

　　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ù)原來(lái)的空間;p標(biāo)簽就會(huì)當(dāng)img不存在一樣，顯示在div最開(kāi)始的位置：

　　代碼如下：

　　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)閉，就好像該元素原來(lái)不存在一樣(參照上圖看效果);

　　sticky 粘性定位

　　css3中新增的屬性值，有兼容問(wèn)題，ie低版本瀏覽器不支持

　　粘性定位，元素在瀏覽器范圍內(nèi)定位時(shí)就像 position:relative; 而當(dāng)頁(yè)面滾動(dòng)超出目標(biāo)區(qū)域時(shí)，它的定位效果就像 position:fixed;，它會(huì)固定在目標(biāo)位置。

　　基本語(yǔ)法講解

　　例如：給img元素設(shè)置粘性定位，代碼如下：

　　css代碼：

　　效果如下：

　　元素設(shè)置絕對(duì)定位、固定定位后，會(huì)生成一個(gè)塊級(jí)框，而不論原來(lái)它在正常流中生成何種類型的框。

　　例如： span默認(rèn)為行內(nèi)元素，給其設(shè)置絕對(duì)定位，觀察其生成的塊級(jí)框效果，代碼如下：

　　Html：

　　Css：

　　效果如下：

　　以上是對(duì)position屬性語(yǔ)法的基本講解，其實(shí)position在實(shí)際開(kāi)發(fā)中，有很多靈活的使用方式，下次我們寫(xiě)一個(gè)比較有趣的案例，給大家展示定位在實(shí)際項(xiàng)目中的靈活應(yīng)用。