TP08定位網頁元素

定位網頁元素第八章本章任務制作經濟半小時專題報道頁面制作帶按鈕的輪播廣告制作下拉列表導航菜單制作當當圖書榜頁面2/30本章目標會使用position定位網頁元素會使用z-index屬性調整定位元素的堆疊次序3/30定位在網頁中的應用隨滾動條移動的廣告圖片工作地點選擇框4/30在線咨詢圖框定位position屬性static：默認值，沒有定位relative：相對定位absolute：絕對定位fixed：固定定位fixed目前還不被一些瀏覽器支持，實際網頁制作中也不常用。經驗5/30static定位static屬性值演示示例1：static定位沒有定位，以標準流方式顯示6/30相對定位relative屬性值相對自身原來位置進行偏移偏移設置：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概念：相對定位就是相對于自己應該在的位置的定位,比如left:1px的時候就是相對于正常位置右移了1個像素,相對定位元素的規(guī)律設置相對定位的盒子會相對它原來的位置，通過指定偏移，到達新的位置。設置相對定位的盒子仍在標準流中，它對父級盒子和相鄰的盒子都沒有任何影響。8/30浮動元素設置相對定位設置第二個盒子右浮動，再設置第一、第二盒子相對定位#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：浮動元素使用relative定位9/30相對定位小結設置了position屬性值為relative的網頁元素，無論是在標準流中還是在浮動流中，都不會對它的父級元素和相鄰元素有任何影響，它只針對自身原來的位置進行偏移。10/30絕對定位absolute屬性值偏移設置：left、right、top、bottom11/30絕對定位是相對于瀏覽器窗口的定位,left:1px就是在瀏覽器窗口距離左邊1像素的位置絕對定位小結使用了絕對定位的元素以它最近的一個“已經定位”的“祖先元素”為基準進行偏移。如果沒有已經定位的祖先元素，那么會以瀏覽器窗口為基準進行定位。絕對定位的元素從標準文檔流中脫離，這意味著它們對其他元素的定位會造成影響。相對就是與絕對相反的，當頁面拉伸的時候相對定位的兩個元素會因為位置關系而做相應的位置改變，但是絕對定位不會

12/30設置了絕對定位但沒有設置偏移量的元素將保持在原來的位置。這個性質在網頁制作中可以用于需要使某個元素脫離標準流，而仍然希望它保持在原來的位置的情況。#second{ background-color:#CCF; border:1px#0000A8dashed;

position:absolute; right:30px;}絕對定位不設置偏移量示例經驗13/30學員操作—經濟半小時專題報道2-1訓練要點使用float定位網頁元素使用background設置頁面背景使用border設置邊框樣式使用position定位網頁元素使用定義列表布局頁面內容講解需求說明指導需求說明頁面內容在瀏覽器中居中顯示14/30學員操作—經濟半小時專題報道2-2實現(xiàn)思路使用定義列表進行圖文混排，圖片放在<dt>標簽中，文本放在<dd>標簽中使用浮動設置<dt>左浮動及寬度使用position設置第二個學員介紹的定位完成時間：10分鐘指導提示<dl><dt><imgsrc="image/adver-03.jpg"alt="學員照片"/></dt><dd><p><span>王洪賢</span>，北大……</p></dd></dl>15/30學員操作—帶按鈕的輪播廣告2-1訓練要點使用background-color設置背景顏色使用border設置邊框樣式使用position定位網頁元素使用無序列表布局頁面內容教員講解需求指導需求說明使用無序列表排版數字按鈕16/30學員操作—帶按鈕的輪播廣告2-2實現(xiàn)思路使用定位屬性設置數字按鈕顯示在圖片的右下方使用后代選擇器整體設置<li>的背景顏色、邊框樣式、數字邊框之間的距離完成時間：10分鐘提示指導#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共性問題集中講解常見問題及解決辦法代碼規(guī)范問題調試技巧共性問題集中講解18/30z-index屬性調整元素定位時重疊層的上下位置z-index屬性值：整數，默認值為0設置了positon屬性時，z-index屬性可以設置各元素之間的重疊高低關系。z-index值大的層位于其值小的層上方19/30CSS中的

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

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

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