1、任務(wù)12 元素的定位第五單元 盒子模型學(xué)習(xí)目標(biāo)固定定位（fixed）靜態(tài)定位（static）相對定位（relative）絕對定位（absolute）掌握不同定位模式的應(yīng)用場合了解:學(xué)習(xí)目標(biāo)任務(wù)目標(biāo)實戰(zhàn)演練制作旅游景點推薦網(wǎng)banner強化訓(xùn)練制作個人博客首頁知識準(zhǔn)備1. 元素的定位元素的定位：可以精確定義一個元素的準(zhǔn)確位置（1）定位模式：position屬性static：靜態(tài)定位relative：相對定位absolute：絕對定位fixed：固定定位 （2）邊偏移：left：左側(cè)偏移量right：右側(cè)偏移量top：頂端偏移量bottom：底部偏移量知識準(zhǔn)備2. 靜態(tài)定位（static）靜態(tài)定位

2、（static）：網(wǎng)頁元素默認(rèn)的定位方式，元素按照標(biāo)準(zhǔn)流進行布局。不能通過設(shè)置邊偏移屬性left、right、top、bottom值來改變元素的位置。知識準(zhǔn)備3. 相對定位（relative）相對定位（relative）：網(wǎng)頁元素相對于其在原文檔流的位置進行定位，當(dāng)元素設(shè)置為相對定位“position:relative;”，該元素就會相對于其自身的默認(rèn)位置進行偏移，但是它在文檔流中的位置仍然保留。知識準(zhǔn)備示例：元素的相對定位 body margin: 0px; padding: 0px; font-size: 18px; font-weight: bold; .father margin: 1

3、0px auto; width: 300px; height: 300px; padding: 10px; background-color: #c0c0c0; border: 1px dashed #666; .box1,.box2,.box3 width: 100px; height: 50px; line-height: 50px; text-align: center; background-color: #9F6; margin: 15px 0px; border: 1px solid #999; box1 box2 box3 .box2 position: relative; /*

4、相對定位*/ left: 150px; /*距離原位置左邊線150px*/ top: 100px; /*距離原位置頂部邊線100px*/ 知識準(zhǔn)備 4. 絕對定位（absolute）絕對定位（absolute）：將元素相對于距離其最近的、已經(jīng)定位（相對、絕對或固定定位）的父元素進行定位，若所有父元素都沒有定位，則依據(jù)body根元素（瀏覽器窗口）進行定位。當(dāng)元素設(shè)置為絕對定位“position: absolute;”，該元素就會相對于其父元素或body根元素進行偏移，脫離文檔流，它在文檔流中的位置將被其他元素占據(jù)。知識準(zhǔn)備示例：元素的絕對定位 body margin: 0px; padding:

5、 0px; font-size: 18px; font-weight: bold; .father margin: 10px auto; width: 300px; height: 300px; padding: 10px; background-color: #c0c0c0; border: 1px dashed #666; .box1,.box2,.box3 width: 100px; height: 50px; line-height: 50px; text-align: center; background-color: #9F6; margin: 15px 0px; border:

6、1px solid #999; box1 box2 box3 .box2 position: absolute; /*絕對定位*/ left: 150px; /*距離父元素左邊線150px*/ top: 100px; /*距離父元素頂部邊線100px*/ 知識準(zhǔn)備示例：“子絕父相”原則 body margin: 0px; padding: 0px; font-size: 18px; font-weight: bold; .father position: relative; margin: 10px auto; width: 300px; height: 300px; padding: 10p

7、x; background-color: #c0c0c0; border: 1px dashed #666; .box1,.box2,.box3 width: 100px; height: 50px; line-height: 50px; text-align: center; background-color: #9F6; margin: 15px 0px; border: 1px solid #999; box1 box2 box3 .box2 position: absolute; /*絕對定位*/ left: 150px; /*距離父元素左邊線150px*/ top: 100px; /

8、*距離父元素頂部邊線100px*/ 知識準(zhǔn)備5. 固定定位（fixed）固定定位（fixed）：相對于瀏覽器窗口進行定位。元素設(shè)置為固定定位之后，就會脫離原來的文檔流進行定位，原有的位置將被其他元素占據(jù)。無論瀏覽器窗口大小如何改變，瀏覽器滾動條如何拖動，固定定位的元素都將顯示在瀏覽器的固定位置。知識準(zhǔn)備6. z-index層疊等級屬性z-index層疊等級屬性：定義疊加元素的堆疊順序，其值可以取正整數(shù)、0、負(fù)整數(shù)，默認(rèn)值為0，取值越大，定位元素的位置就越靠上。實戰(zhàn)演練 案例描述：設(shè)計并制作旅游景點推薦網(wǎng)banner，網(wǎng)頁效果如下圖1所示。當(dāng)鼠標(biāo)移動到每個導(dǎo)航選項上時，超鏈接的樣式將會發(fā)生變化，效果如圖2所示。制作旅游景點推薦網(wǎng)ban