定位網(wǎng)頁(yè)元素第八章本章任務(wù)制作經(jīng)濟(jì)半小時(shí)專題報(bào)道頁(yè)面制作帶按鈕的輪播廣告制作下拉列表導(dǎo)航菜單制作當(dāng)當(dāng)圖書(shū)榜頁(yè)面2/30本章目標(biāo)會(huì)使用position定位網(wǎng)頁(yè)元素會(huì)使用z-index屬性調(diào)整定位元素的堆疊次序3/30定位在網(wǎng)頁(yè)中的應(yīng)用隨滾動(dòng)條移動(dòng)的廣告圖片工作地點(diǎn)選擇框4/30在線咨詢圖框定位position屬性static：默認(rèn)值，沒(méi)有定位relative：相對(duì)定位absolute：絕對(duì)定位fixed：固定定位fixed目前還不被一些瀏覽器支持，實(shí)際網(wǎng)頁(yè)制作中也不常用。經(jīng)驗(yàn)5/30static定位static屬性值演示示例1：static定位沒(méi)有定位，以標(biāo)準(zhǔn)流方式顯示6/30相對(duì)定位relative屬性值相對(duì)自身原來(lái)位置進(jìn)行偏移偏移設(shè)置：top、left、right、bottom演示示例2：relative定位示例#first{ background-color:#FC9; border:1px#B55A00dashed;

position:relative; top:-20px; left:20px;}#third{ background-color:#C5DECC; border:1px#395E4Fdashed;

position:relative; right:20px; bottom:30px;}7/30概念：相對(duì)定位就是相對(duì)于自己應(yīng)該在的位置的定位,比如left:1px的時(shí)候就是相對(duì)于正常位置右移了1個(gè)像素,相對(duì)定位元素的規(guī)律設(shè)置相對(duì)定位的盒子會(huì)相對(duì)它原來(lái)的位置，通過(guò)指定偏移，到達(dá)新的位置。設(shè)置相對(duì)定位的盒子仍在標(biāo)準(zhǔn)流中，它對(duì)父級(jí)盒子和相鄰的盒子都沒(méi)有任何影響。8/30浮動(dòng)元素設(shè)置相對(duì)定位設(shè)置第二個(gè)盒子右浮動(dòng)，再設(shè)置第一、第二盒子相對(duì)定位#second{ background-color:#CCF; border:1px#0000A8dashed;

float:right;}示例#first{ background-color:#FC9; border:1px#B55A00dashed;

position:relative; right:20px; bottom:20px;}#second{ background-color:#CCF; border:1px#0000A8dashed;

float:right; position:relative; left:20px; top:-20px;}演示示例3：浮動(dòng)元素使用relative定位9/30相對(duì)定位小結(jié)設(shè)置了position屬性值為relative的網(wǎng)頁(yè)元素，無(wú)論是在標(biāo)準(zhǔn)流中還是在浮動(dòng)流中，都不會(huì)對(duì)它的父級(jí)元素和相鄰元素有任何影響，它只針對(duì)自身原來(lái)的位置進(jìn)行偏移。10/30絕對(duì)定位absolute屬性值偏移設(shè)置：left、right、top、bottom11/30絕對(duì)定位是相對(duì)于瀏覽器窗口的定位,left:1px就是在瀏覽器窗口距離左邊1像素的位置絕對(duì)定位小結(jié)使用了絕對(duì)定位的元素以它最近的一個(gè)“已經(jīng)定位”的“祖先元素”為基準(zhǔn)進(jìn)行偏移。如果沒(méi)有已經(jīng)定位的祖先元素，那么會(huì)以瀏覽器窗口為基準(zhǔn)進(jìn)行定位。絕對(duì)定位的元素從標(biāo)準(zhǔn)文檔流中脫離，這意味著它們對(duì)其他元素的定位會(huì)造成影響。相對(duì)就是與絕對(duì)相反的，當(dāng)頁(yè)面拉伸的時(shí)候相對(duì)定位的兩個(gè)元素會(huì)因?yàn)槲恢藐P(guān)系而做相應(yīng)的位置改變，但是絕對(duì)定位不會(huì)

12/30設(shè)置了絕對(duì)定位但沒(méi)有設(shè)置偏移量的元素將保持在原來(lái)的位置。這個(gè)性質(zhì)在網(wǎng)頁(yè)制作中可以用于需要使某個(gè)元素脫離標(biāo)準(zhǔn)流，而仍然希望它保持在原來(lái)的位置的情況。#second{ background-color:#CCF; border:1px#0000A8dashed;

position:absolute; right:30px;}絕對(duì)定位不設(shè)置偏移量示例經(jīng)驗(yàn)13/30學(xué)員操作—經(jīng)濟(jì)半小時(shí)專題報(bào)道2-1訓(xùn)練要點(diǎn)使用float定位網(wǎng)頁(yè)元素使用background設(shè)置頁(yè)面背景使用border設(shè)置邊框樣式使用position定位網(wǎng)頁(yè)元素使用定義列表布局頁(yè)面內(nèi)容講解需求說(shuō)明指導(dǎo)需求說(shuō)明頁(yè)面內(nèi)容在瀏覽器中居中顯示14/30學(xué)員操作—經(jīng)濟(jì)半小時(shí)專題報(bào)道2-2實(shí)現(xiàn)思路使用定義列表進(jìn)行圖文混排，圖片放在<dt>標(biāo)簽中，文本放在<dd>標(biāo)簽中使用浮動(dòng)設(shè)置<dt>左浮動(dòng)及寬度使用position設(shè)置第二個(gè)學(xué)員介紹的定位完成時(shí)間：10分鐘指導(dǎo)提示<dl><dt><imgsrc="image/adver-03.jpg"alt="學(xué)員照片"/></dt><dd><p><span>王洪賢</span>，北大……</p></dd></dl>15/30學(xué)員操作—帶按鈕的輪播廣告2-1訓(xùn)練要點(diǎn)使用background-color設(shè)置背景顏色使用border設(shè)置邊框樣式使用position定位網(wǎng)頁(yè)元素使用無(wú)序列表布局頁(yè)面內(nèi)容教員講解需求指導(dǎo)需求說(shuō)明使用無(wú)序列表排版數(shù)字按鈕16/30學(xué)員操作—帶按鈕的輪播廣告2-2實(shí)現(xiàn)思路使用定位屬性設(shè)置數(shù)字按鈕顯示在圖片的右下方使用后代選擇器整體設(shè)置<li>的背景顏色、邊框樣式、數(shù)字邊框之間的距離完成時(shí)間：10分鐘提示指導(dǎo)#adverImg{ width:430px; height:130px;

position:relative; }#number{

position:absolute; right:5px; bottom:2px;}#numberli{ float:left; margin-right:5px; width:20px; height:20px; border:1px#666solid; text-align:center; line-height:20px; font-size:12px; list-style-type:none; background-color:#FFF;}17/30共性問(wèn)題集中講解常見(jiàn)問(wèn)題及解決辦法代碼規(guī)范問(wèn)題調(diào)試技巧共性問(wèn)題集中講解18/30z-index屬性調(diào)整元素定位時(shí)重疊層的上下位置z-index屬性值：整數(shù)，默認(rèn)值為0設(shè)置了positon屬性時(shí)，z-index屬性可以設(shè)置各元素之間的重疊高低關(guān)系。z-index值大的層位于其值小的層上方19/30CSS中的

z-index屬性用于設(shè)置節(jié)點(diǎn)的堆疊順序,擁有更高堆疊順序的節(jié)點(diǎn)將顯示在堆疊順序較低的節(jié)點(diǎn)前面網(wǎng)頁(yè)元素透明度CSS設(shè)置元素透明度屬性說(shuō)明舉例opacity:xx值為0~1，值越小越透明opacity:0.4;filter:alpha(opacity=x)x值為0~100，值越小越透明filter:alpha(opacity=40);演示示例5：z-index屬性20/30小結(jié)網(wǎng)頁(yè)中的元素都含有兩個(gè)堆疊層級(jí)，一個(gè)是未設(shè)置絕對(duì)定位時(shí)所處的環(huán)境，此時(shí)z-index是0；另一個(gè)是設(shè)置絕對(duì)定位時(shí)所處的堆疊環(huán)境，此時(shí)層的位置由z-index的值確定。改變?cè)O(shè)置絕對(duì)定位和沒(méi)有設(shè)置絕對(duì)定位的層的上下堆疊順序，只需調(diào)整絕對(duì)定位層的z-index值即可。21/30學(xué)員操作—制作下拉列表菜單2-1訓(xùn)練要點(diǎn)使用position設(shè)置相對(duì)定位和絕對(duì)定位使用z-index設(shè)置層級(jí)堆疊需求說(shuō)明教員講解需求指導(dǎo)22/30學(xué)員操作—制作下拉列表菜單2-2實(shí)現(xiàn)思路初始狀態(tài)<dd>不顯示，并設(shè)置二級(jí)菜單的位置當(dāng)鼠標(biāo)移至一級(jí)導(dǎo)航菜單上時(shí)顯示對(duì)應(yīng)的二級(jí)菜單，使用超鏈接的偽類設(shè)置<dd>顯示出來(lái)完成時(shí)間：10分鐘提示指導(dǎo).menudd{

display:none; position:absolute; z-index:1; left:10px; top:36px;}.menudl:hoverdd{

display:block;}23/30學(xué)員操作—當(dāng)當(dāng)圖書(shū)榜需求說(shuō)明頁(yè)面右上角“3折瘋搶”圖片和圖書(shū)列表中的“1”、“2”、“3”圖片均使用定位方式實(shí)現(xiàn)。鼠標(biāo)移至導(dǎo)航菜單上時(shí)出現(xiàn)下劃線。頁(yè)面中英文體為Verdana，中文字體為宋體，字體大小為12px。完成時(shí)間：10分鐘練習(xí)24/30共性問(wèn)題集中講解常見(jiàn)問(wèn)題及解決辦法代碼規(guī)范問(wèn)題調(diào)試技巧共性問(wèn)題集中講解25/30總結(jié)使用position屬性定位頁(yè)面元素。position屬性值有static、relative、absolute和fixed，其中relative和absolute兩種定位方式是網(wǎng)