網(wǎng)頁設(shè)計與制作案例教程（HTML5+CSS3+JavaScript）（微課版）（第2版） 課件 案例10知識點：元素的定位

我們畢業(yè)啦其實是答辯的標(biāo)題地方元素的定位元素的定位浮動布局雖然靈活，但無法對元素的位置進行精確的控制。在CSS中，使用元素的定位等相關(guān)屬性可以對元素進行精確定位。元素的定位定位方式position屬性用于定義元素的定位方式。語法格式：

選擇器{position:static|relative|absolute|fixed;}靜態(tài)定位相對定位絕對定位固定定位說明：static：靜態(tài)定位。始終按照網(wǎng)頁文檔流進行布局，默認(rèn)定位方式。relative：相對定位，相對于元素在原文檔流的位置進行定位。absolute：絕對定位，相對于元素上一個已經(jīng)定位的父元素進行定位。fixed：固定定位，相對于瀏覽器窗口進行定位。元素的定位確定元素位置在CSS中，通過left、right、top、bottom這4個坐標(biāo)屬性來精確定位元素。left：定義元素相對于其父元素左邊線的距離。right：定義元素相對于其父元素右邊線的距離。top：定義元素相對于其父元素上邊線的距離。bottom：定義元素相對于其父元素下邊線的距離。示例position:relative;left:50px;top:10px;注意：邊偏移是配合position屬性之后進行定義的，且一般用兩個屬性即可。靜態(tài)定位是元素的默認(rèn)定位方式，是各個元素按照標(biāo)準(zhǔn)流（包括浮動方式）進行定位。在靜態(tài)定位狀態(tài)下，無法通過設(shè)置left、right、top、bottom這4個屬性來改變元素的位置。靜態(tài)定位定位類型例10-1example01.html定位類型采用相對定位的元素會相對于自身原本的位置，通過偏移指定的距離到達新的位置。其中，水平方向的偏移量由left屬性或right屬性指定；豎直方向的偏移量由top屬性和bottom屬性指定。相對定位定位類型相對定位例10-2example02.html注意：采用相對定位的元素在文檔流中的位置仍然保留。定位類型絕對定位是將元素依據(jù)最近的已經(jīng)定位（相對定位或絕對定位）的父元素進行定位，若所有父元素都沒有定位，則依據(jù)body元素（瀏覽器窗口）進行定位。絕對定位定位類型絕對定位例10-3example03.html注意：采用絕對定位的元素從標(biāo)準(zhǔn)流中脫離，不再占用標(biāo)準(zhǔn)流中的空間。定位類型固定定位是絕對定位的一種特殊形式，它總是以瀏覽器窗口作為參照物來定位網(wǎng)頁元素。當(dāng)對元素設(shè)置固定定位后，元素將脫離標(biāo)準(zhǔn)流的控制，總是顯示在瀏覽器窗口的固定位置。固定定位例如，下面的代碼用于將二維碼圖片固定定位在瀏覽器窗口的右側(cè)。<imgstyle="position:fixed;right:0;top:200px;z-index:999;width:100px;"src="images/ewm.png"/>z-index屬性當(dāng)對多個元素同時設(shè)置定位類型時，定位元素之間有可能會發(fā)生重疊。要想調(diào)整定位元素的堆疊順序，可以對定位元素應(yīng)用z-index屬性，其取值可為正整數(shù)、負(fù)整數(shù)和0。z-index屬性的默認(rèn)屬性值為