{首页主词},&

　　在css眾多屬性中，定位position屬性，必須有姓名，而且占據了比較重要的地位，比如：二級，三級導航效果，鼠標懸停的一些動態效果，懸停欄，側邊導航欄定位效果等等都是需要定位實現的。

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

　　1、定位的歷史

　　W3C(萬維網聯盟)組織于1998年5月發布了CSS2版本，CSS2規范在很大程度上擴展了CSS1中的內容。它包括數十種新的屬性(和偽元素)，以及現有屬性的很多附加值，其中就包括定位屬性。

　　2、瀏覽器的支持

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

　　3、position屬性的語法

　　position 屬性：規定元素的定位類型

　　屬性值：

　　static：默認值。沒有定位，元素出現在正常的流中。

　　relative：生成相對定位的元素，相對于其正常位置進行定位。

　　fixed: 生成絕對定位的元素，相對于瀏覽器窗口進行定位。

　　absolute: 生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。

　　sticky (css3中新增的屬性值): 粘性定位，該定位基于用戶滾動的位置。

　　4、定位需要配合使用的屬性

　　left 屬性:規定元素的左邊緣偏移的大小。

　　right 屬性規定元素的右邊緣偏移的大小。

　　top 屬性規定元素的頂部邊緣偏移的大小。

　　bottom 屬性規定元素的底部邊緣偏移的大小。

　　以上屬性用于給元素定位設置坐標點的位置;

　　屬性值：

　　auto：默認值。通過瀏覽器計算左邊緣的位置。

　　%：設置以包含元素的百分比計的左邊位置。可使用負值。

　　length：使用 px、cm 等單位設置元素的左邊位置。可使用負值。

　　5、了解編程中的坐標

　　· 編程中的坐標，x軸-水平軸右為正，左為負，Y軸-垂直軸下為正，上為負

　　· 每個元素都自帶一個坐標系，元素左上角的位置為原點(0)位置，如下圖所示

　　6、分別介紹定位屬性每個屬性值的使用語法

　　· position:static 靜態定位

　　position屬性的默認值，即沒有定位，遵循正常的文檔流對象。

　　遵循正常的文檔流對象，可以理解為，元素的位置根據在html中的書寫順序依次排序顯示，沒有特殊的位置改變

　　· position:relative 相對定位

　　生成相對定位的元素，相對于其正常位置進行定位。

　　基本使用講解：

　　例如：一個img元素在沒有設置定位時，正常顯示在瀏覽器中，自帶坐標系，

　　如圖顯示;

　　給img元素設置相對定位，設置定位的坐標為(100px,100px)，美女的位置會從原本原點的位置移動到(100px,100px)的位置，會發生如下變化：

　　代碼實現如下：

　　相對定位對元素在文檔流中的影響

　　元素仍然保持其未定位前的形狀，它原本在文本流中所占的空間仍保留

　　例如：在img標簽下面書寫一個span標簽，img在定位之后，原本的位置空間依舊是保留在文本流中的，寫在img下面的span是沒有上去的;

　　代碼實現如下：

　　效果如下：

　　· position: absolute 絕對定位

　　生成絕對定位的元素，相對于static定位以外的第一個父元素進行定位。

　　解釋：指絕對定位元素會根據有定位設置(除static定位)的父元素作為參照進行定位;如果父元素沒有定位設置，那就繼續向上找祖父元素，看是否有定位設置，有的話就根據祖父元素定位，沒有的話，那就繼續向上找…….如果都沒有，就根據html進行定位。

　　包含塊：絕對定位元素參照的有定位設置的父元素我們稱為包含塊，包含塊是絕對定位的基礎，包含塊就是為絕對定位元素提供坐標偏移和顯示范圍的參照物;

　　設置某個元素為包含塊：給此元素添加relative，fixed，absolute都可，推薦使用relative，因為不會影響元素在文本流中的顯示;

　　總結元素絕對定位三部曲：

　　· 先確定其包含塊

　　· 設置元素絕對定位

　　· 定位的位置

　　基本使用講解：

　　例如：img元素放在div中，沒有設置定位效果

　　代碼實現如下：

　　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會根據html進行定位，定位到離包含塊左邊0，上邊0的位置定位，也就是左上角位置;

　　效果如下：

　　如果想讓img根據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;

　　}

　　效果如下：

　　絕對定位對元素在文檔流中的影響

　　給元素設置絕對定位之后，元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣;

　　例如：在img下面添加了一個p標簽，并且沒有給img設置絕對定位，此時img和p會根據書寫順序，從上向下依次顯示，代碼如下：

　　Html：

　　Css：

　　* {

　　margin: 0;

　　padding: 0;

　　}

　　div {

　　width: 400px;

　　height: 400px;

　　border: 10px dashed coral;

　　margin: 100px;

　　}

　　p {

　　background: lemonchiffon;

　　}

　　效果如下：

　　當給img設置絕對定位之后，img在正常文檔流中所占的空間會關閉，img不在占據原來的空間;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

　　生成固定定位的元素，相對于瀏覽器窗口進行定位。

　　基本使用講解

　　元素設置固定定位之后，相對窗口進行定位，不會根據瀏覽器滾動條的滾動而移動位置，代碼如下：

　　結構：內容比較多,讓瀏覽器可以出現滾動條

　　效果如下：

　　給圖片添加固定定位;代碼如下：

　　效果如下：

　　固定定位對元素在文檔流中的影響

　　給元素設置固定定位之后，元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣(參照上圖看效果);

　　sticky 粘性定位

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

　　粘性定位，元素在瀏覽器范圍內定位時就像 position:relative; 而當頁面滾動超出目標區域時，它的定位效果就像 position:fixed;，它會固定在目標位置。

　　基本語法講解

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

　　css代碼：

　　效果如下：

　　元素設置絕對定位、固定定位后，會生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

　　例如： span默認為行內元素，給其設置絕對定位，觀察其生成的塊級框效果，代碼如下：

　　Html：

　　Css：

　　效果如下：

　　以上是對position屬性語法的基本講解，其實position在實際開發中，有很多靈活的使用方式，下次我們寫一個比較有趣的案例，給大家展示定位在實際項目中的靈活應用。

Css定位