Web前端開發(fā)任務(wù)式教程（HTML5+CSS3）（微課版） 課件模塊7 元素定位

《Web開發(fā)任務(wù)式教程》

模塊7元素定位《Web前端開發(fā)任務(wù)式教程》元素定位定位能夠設(shè)置特殊的網(wǎng)頁效果，如固定在網(wǎng)頁某個(gè)位置的幫助菜單，跟隨主菜單的子菜單等，本模塊介紹定位屬性，包括基本語法和定位應(yīng)用。任務(wù)7.1掌握定位的語法任務(wù)7.2應(yīng)用子絕父相定位元素定位學(xué)習(xí)目標(biāo)【知識(shí)目標(biāo)】1）掌握定位屬性的基本語法。2）掌握元素定位的位置基準(zhǔn)和位置偏移屬性的設(shè)置方法。3）掌握子絕父相定位的用法。4）掌握Z深度屬性的用法?！灸芰δ繕?biāo)】能夠使用定位設(shè)計(jì)常見網(wǎng)頁效果，包括幫助菜單、下拉菜單、彈出式菜單、搜索框、輪播圖布局和內(nèi)容標(biāo)識(shí)?！禬eb前端開發(fā)任務(wù)式教程》在網(wǎng)頁設(shè)計(jì)中，往往有一些特殊的位置需求，例如，幫助按鈕一般固定在網(wǎng)頁的右下角，既不影響網(wǎng)頁整體內(nèi)容顯示，又方便用戶操作；導(dǎo)航菜單一般放置在網(wǎng)頁頂部，醒目且方便導(dǎo)航。針對(duì)這些特殊的位置需求，就需要用到定位技術(shù)。本任務(wù)介紹定位的基本語法與用法，通過本任務(wù)的學(xué)習(xí)，應(yīng)全面掌握相對(duì)定位、絕對(duì)定位、固定定位、粘性定位4種基本定位的語法、用法及特點(diǎn)，為使用定位技術(shù)設(shè)計(jì)網(wǎng)頁效果奠定良好的學(xué)習(xí)基礎(chǔ)。元素定位任務(wù)7.1掌握定位的語法《Web前端開發(fā)任務(wù)式教程》元素定位7.1.1定位屬性1.普通流定位機(jī)制元素有3種定位機(jī)制：普通流、浮動(dòng)和定位。HTML元素在網(wǎng)頁中都被看作是框，以框模型的方式進(jìn)行排列。默認(rèn)所有框都在普通流中進(jìn)行定位，普通流中框的位置由元素本身決定，遵循以下原則。1）塊元素從上到下一個(gè)接一個(gè)地排列，元素之間的垂直距離基于框的垂直外邊距，并根據(jù)邊距合并原則進(jìn)行上下外邊距的合并。2）內(nèi)聯(lián)塊元素在一行中水平排列，通過設(shè)置元素的水平內(nèi)邊距、邊框和外邊距調(diào)整相互之間的間距。由一行元素組成的水平框稱為行框（LineBox），默認(rèn)行框的高度是由行內(nèi)所有元素框中高度最大的框決定，也可以通過設(shè)置行高來增加行框的高度。3）內(nèi)聯(lián)元素在一行中水平排列，行框的高度是由行內(nèi)所有元素框中高度最大的框決定，僅包含內(nèi)聯(lián)元素的行不能設(shè)置行高?！禬eb前端開發(fā)任務(wù)式教程》元素定位2.position屬性position屬性設(shè)置定位的類型，取值說明如表7-1所示。表7-1position屬性取值《Web前端開發(fā)任務(wù)式教程》屬性值說明static靜態(tài)定位，默認(rèn)定位方式，元素沒有定位relative設(shè)置元素的相對(duì)定位fixed設(shè)置元素的固定定位absolute設(shè)置元素的絕對(duì)定位sticky設(shè)置元素的粘性定位inherit規(guī)定從父元素繼承position屬性的值元素定位3.位置偏移屬性普通流定義了元素在網(wǎng)頁中的標(biāo)準(zhǔn)位置，定位允許元素離開普通流，相對(duì)于參考位置進(jìn)行位置移動(dòng)。元素相對(duì)于參考位置進(jìn)行的位置移動(dòng)稱為位置偏移，可以在上、下、左、右4個(gè)方向上進(jìn)行移動(dòng)，對(duì)應(yīng)有4個(gè)位置偏移屬性。說明如表7-2所示。表7-2位置偏移屬性《Web前端開發(fā)任務(wù)式教程》屬性名說明bottom設(shè)置定位元素下外邊距邊界與參考位置之間的位置偏移?？梢允褂秘?fù)值，正值從參考位置向上移動(dòng)，負(fù)值從參考位置向下移動(dòng)。有以下幾種取值，說明如下。auto：默認(rèn)值，瀏覽器自動(dòng)計(jì)算位置%：設(shè)置以包含元素的百分比計(jì)算的底邊位置length：使用px、cm等單位設(shè)置元素的底邊位置inherit：從父元素繼承bottom屬性的值top設(shè)置定位元素上外邊距邊界與參考位置之間的位置偏移，可以使用負(fù)值，正值從參考位置向下移動(dòng)，負(fù)值從參考位置向上移動(dòng)。參數(shù)取值同bottom屬性right設(shè)置定位元素右外邊距邊界與參考位置之間的位置偏移，可以使用負(fù)值，正值從參考位置向左移動(dòng)，負(fù)值從參考位置向右移動(dòng)。參數(shù)取值同bottom屬性left設(shè)置定位元素左外邊距邊界與參考位置之間的位置偏移，可以使用負(fù)值，正值從參考位置向右移動(dòng)，負(fù)值從參考位置向左移動(dòng)。參數(shù)取值同bottom屬性元素定位4.clip屬性clip屬性裁剪絕對(duì)定位元素，元素被剪入指定的形狀中顯示，取值說明如表7-3所示。表7-3clip屬性取值《Web前端開發(fā)任務(wù)式教程》屬性值說明shape設(shè)置元素的形狀，唯一合法的形狀值是：rect(top,right,bottom,left)auto默認(rèn)值，不應(yīng)用任何剪裁inherit從父元素繼承clip屬性值元素定位7.1.2基本定位1.相對(duì)定位相對(duì)定位（position:static;）的參考位置是元素本身，也即元素相對(duì)于其在普通流中的標(biāo)準(zhǔn)位置進(jìn)行位置移動(dòng)。移動(dòng)后元素形狀不變，原本占有的普通流位置仍然保留。如圖7-1所示，元素框2本來位于無背景色虛線框所示的位置，使用相對(duì)定位后移動(dòng)到有背景色虛線框所示的位置，但其原有位置仍然保留，所以元素框3的位置并沒有發(fā)生變化。元素框2疊加到了元素框3的上面。圖7-1相對(duì)定位位置正偏移【例7-1】編碼實(shí)現(xiàn)圖7-1所示的相對(duì)定位效果，體驗(yàn)相對(duì)定位的位置移動(dòng)規(guī)則?！禬eb前端開發(fā)任務(wù)式教程》元素定位后能夠疊加在未定位元素之上，遮擋未定位元素。元素定位【例7-2】修改例7-1，將位置偏移值修改為負(fù)數(shù)，查看網(wǎng)頁顯示效果，體驗(yàn)偏移值為負(fù)值的位置移動(dòng)規(guī)則。圖7-2相對(duì)定位位置負(fù)偏移《Web前端開發(fā)任務(wù)式教程》元素定位2.固定定位固定定位（position:fixed;）的參考位置是瀏覽器窗口，也即元素相對(duì)于瀏覽器窗口進(jìn)行位置移動(dòng)。定位后元素從普通流中完全刪除，原本占有的普通流位置不再保留。由于其參考位置是瀏覽器窗口，滾動(dòng)網(wǎng)頁時(shí)固定定位的元素始終位于瀏覽器窗口的某一位置，經(jīng)常被用于設(shè)計(jì)位于瀏覽器中固定位置的幫助按鈕?！纠?-3】使用固定定位技術(shù)設(shè)計(jì)一個(gè)如圖7-3所示的顯示在瀏覽器窗口右下角的幫助按鈕，網(wǎng)頁初始顯示效果如圖7-3a所示，當(dāng)鼠標(biāo)懸停于幫助按鈕上時(shí)，顯示較大的幫助圖標(biāo)，模擬彈出幫助菜單的畫面，如圖7-3b所示。a)初始顯示效果b)鼠標(biāo)懸停于幫助按鈕的顯示效果圖7-3固定定位幫助按鈕《Web前端開發(fā)任務(wù)式教程》元素定位3.Z深度屬性元素定位以后會(huì)發(fā)生堆疊現(xiàn)象，z-index屬性能夠設(shè)置堆疊的順序。屬性取值說明如表7-4所示。表7-4z-index屬性《Web前端開發(fā)任務(wù)式教程》屬性值說明auto默認(rèn)值，堆疊順序與父元素相等。如果2個(gè)定位的元素重疊而未指定z-index屬性值，則位于HTML代碼中后面的元素堆疊順序值大，顯示在前面number設(shè)置元素的堆疊順序，可以取正值或負(fù)值，具有較高堆疊順序值的元素始終顯示在具有較低堆疊順序值的元素之上inherit從父元素繼承值元素定位【例7-4】基于Z深度屬性設(shè)計(jì)一個(gè)元素堆疊效果，網(wǎng)頁初始顯示效果如圖7-4a所示，顯示關(guān)閉按鈕，鼠標(biāo)在按鈕上懸停時(shí)，修改按鈕的Z深度屬性值，顯示打開按鈕，如圖7-4b所示。a)初始顯示效果b)鼠標(biāo)懸停于按鈕時(shí)的顯示效果圖7-4Z深度屬性《Web前端開發(fā)任務(wù)式教程》元素定位4.絕對(duì)定位絕對(duì)定位（position:absolute;）的參考位置是已定位（何種定位都可以）的最近父級(jí)或祖先元素，若無已定位的父級(jí)或祖先元素，則是瀏覽器窗口。元素相對(duì)于參考位置進(jìn)行移動(dòng)，移動(dòng)后元素從普通流中完全刪除，原本占有的普通流位置不再保留，如圖7-5所示。元素框2絕對(duì)定位并向下、向右分別移動(dòng)20px、30px后，其原來占有的位置被元素框3所占用，元素框2不再占有位置，直接疊加在元素框1和元素框3的上面。圖7-5絕對(duì)定位【例7-5】修改例7-1，將第2個(gè)元素的定位屬性修改為絕對(duì)定位，實(shí)現(xiàn)圖7-5所示的效果。《Web前端開發(fā)任務(wù)式教程》元素定位【例7-6】有4個(gè)層層嵌套的div元素，設(shè)置最里面div元素box4為絕對(duì)定位，然后依次設(shè)置最外面div元素box1、次外面div元素box2、里面div元素box3為相對(duì)定位，并查看網(wǎng)頁的顯示效果，理解絕對(duì)定位的位置基準(zhǔn)原則。a)相對(duì)瀏覽器窗口定位

b)相對(duì)于.box1元素定位c)相對(duì)于.box2元素定位d)相對(duì)于.box3元素定位圖7-6絕對(duì)定位位置參考《Web前端開發(fā)任務(wù)式教程》元素定位5.定位總結(jié)幾種定位的特點(diǎn)總結(jié)如表7-5所示。表7-5定位特點(diǎn)總結(jié)《Web前端開發(fā)任務(wù)式教程》定位占有位置情況位置偏移屬性的有效性參考位置靜態(tài)定位（position:static;）占有普通流的位置無效無絕對(duì)定位（position:absolute;）不再占有普通流的位置有效定位的父級(jí)或祖先，或者是瀏覽器窗口固定定位（position:fixed;）不再占有普通流的位置有效瀏覽器窗口相對(duì)定位（position:relative;）占有普通流的位置有效自身（普通流）的位置元素定位7.1.3粘性定位粘性定位（position:sticky;）是基于網(wǎng)頁滾動(dòng)位置的一種定位模式，定位表現(xiàn)為在跨越特定的閾值之前為相對(duì)定位，之后為固定定位。也即定位行為在相對(duì)定位與固定定位之間切換，當(dāng)網(wǎng)頁滾動(dòng)沒有超出目標(biāo)區(qū)域時(shí)，元素的定位為相對(duì)定位；當(dāng)網(wǎng)頁滾動(dòng)超出目標(biāo)區(qū)域時(shí)，元素的定位為固定定位，會(huì)固定在目標(biāo)位置。粘性定位的位置偏移屬性與其他定位不同，必須且只能設(shè)置top、right、bottom、left屬性中的某一個(gè)，用于規(guī)定定位模式切換的閾值。不設(shè)置或設(shè)置超過2個(gè)及以上屬性值時(shí)，固定定位的效果將無效，僅表現(xiàn)為相對(duì)定位。InternetExplorer、Edge15以及更早版本的瀏覽器不支持粘性定位?！禬eb前端開發(fā)任務(wù)式教程》元素定位【例7-7】使用粘性定位設(shè)計(jì)一個(gè)粘在網(wǎng)頁頂部的搜索框，初始顯示效果如圖7-7a所示，下拉到網(wǎng)頁到底部時(shí)顯示效果如圖7-7b所示，搜索框始終粘在網(wǎng)頁頂部的指定位置。a)初始顯示效果b)滾動(dòng)到網(wǎng)頁底部顯示效果圖7-7粘性定位搜索框《Web前端開發(fā)任務(wù)式教程》網(wǎng)頁顯示內(nèi)容超出瀏覽器窗口時(shí)粘性定位才有顯示效果，所以測試時(shí)網(wǎng)頁內(nèi)容應(yīng)有足夠數(shù)量的行數(shù)。元素定位相對(duì)定位的元素能夠保留其在普通流中的位置，不設(shè)置或者將其位置偏移設(shè)為0，則其在普通流中的顯示并不發(fā)生變化，保持不設(shè)置定位的普通流位置，所以不設(shè)置或?qū)⑾鄬?duì)定位元素的位置偏移設(shè)為0具有不改變?cè)卦衅胀黠@示順序的特點(diǎn)。絕對(duì)定位的元素不占有普通流位置，可以疊加在任何元素上，不影響普通流的顯示順序。以相對(duì)定位元素為父，嵌套絕對(duì)定位子元素，既能保持網(wǎng)頁普通流的顯示順序，又能產(chǎn)生一些實(shí)用的效果。例如，在商品上疊加一些即時(shí)信息或醒目標(biāo)志，將彈出菜單跟隨指定元素疊加顯示在網(wǎng)頁指定位置等，非常實(shí)用，在網(wǎng)頁設(shè)計(jì)中逐漸成為一種廣泛使用的固定定位組合，稱為子絕父相定位。本任務(wù)使用子絕父相定位設(shè)計(jì)一些常見的網(wǎng)頁效果?！禬eb前端開發(fā)任務(wù)式教程》任務(wù)7.2應(yīng)用子絕父相定位元素定位7.2.1設(shè)計(jì)內(nèi)容標(biāo)識(shí)1.需求說明一年一度的618促銷活動(dòng)即將開始，請(qǐng)使用子絕父相定位為具有促銷優(yōu)惠的商品添加促銷標(biāo)志，使網(wǎng)頁顯示效果如圖7-8所示，要求如下。1）一行居中顯示4個(gè)商品。2）每個(gè)商品左上角疊加618促銷標(biāo)志。圖7-8帶有促銷標(biāo)志的商品列表《Web前端開發(fā)任務(wù)式教程》元素定位2.項(xiàng)目創(chuàng)建與資源準(zhǔn)備新建HTML項(xiàng)目，在項(xiàng)目img目錄下準(zhǔn)備名字分別為“輪胎.jpg”和“618.jpg”的圖像素材。3.HTML內(nèi)容設(shè)計(jì)商品直接用圖像元素顯示，促銷標(biāo)志用div元素加圖像背景顯示，將商品與促銷標(biāo)志放在一個(gè)div元素內(nèi)進(jìn)行歸類，最外面套div元素，方便整體布局。基于分析創(chuàng)建HTML文件。4.CSS樣式設(shè)計(jì)（1）設(shè)計(jì)元素基本樣式基本樣式按照常規(guī)美觀性要求直接設(shè)計(jì)即可。（2）設(shè)計(jì)子絕父相定位促銷標(biāo)志疊加在商品上面，是典型的子絕父相定位應(yīng)用，將商品和促銷標(biāo)志共同的父元素設(shè)置為相對(duì)定位，將促銷標(biāo)志設(shè)置為絕對(duì)定位?！禬eb前端開發(fā)任務(wù)式教程》元素定位7.2.2設(shè)計(jì)輪播圖布局1.需求說明在網(wǎng)頁頭部緊挨菜單下面往往會(huì)顯示一組輪播圖，用以展示網(wǎng)站的推薦內(nèi)容，吸引用戶注意，同時(shí)也方便用戶快速瀏覽網(wǎng)頁主要內(nèi)容。請(qǐng)使用子絕父相定位設(shè)計(jì)如圖7-9所示的輪播圖布局，詳細(xì)要求如下。1）輪播圖底部顯示三條水平線，指示輪播圖像在圖像庫中的位置。2）輪播圖左、右各有一個(gè)“小于”和“大于”號(hào)，供用戶翻頁圖像使用。圖7-9輪播圖布局《Web前端開發(fā)任務(wù)式教程》元素定位2.項(xiàng)目創(chuàng)建與資源準(zhǔn)備新建HTML項(xiàng)目，在項(xiàng)目img目錄下準(zhǔn)備名字為“m3.jpg”的圖像素材。3.HTML內(nèi)容設(shè)計(jì)輪播圖像用div元素加圖像背景顯示，水平線和左、右的小于、大于符號(hào)直接放在div元素內(nèi)，基于分析創(chuàng)建HTML文件。4.CSS樣式設(shè)計(jì)（1）設(shè)計(jì)元素基本樣式基本樣式按照常規(guī)美觀性要求直接設(shè)計(jì)即可。（2）設(shè)計(jì)子絕父相定位輪播圖像底部的三條水平線和左、右的小于、大于號(hào)都是疊加在輪播圖像上的，是典型的子絕父相定位應(yīng)用，輪播圖像是父元素，設(shè)置為相對(duì)定位，水平線、小于、大于號(hào)是子元素，設(shè)置為絕對(duì)定位，并基于輪播圖像尺寸計(jì)算位置偏移值?！禬eb前端開發(fā)任務(wù)式教程》元素定位7.2.3設(shè)計(jì)下拉式菜單1.需求說明網(wǎng)頁頂部菜單往往使用下拉式菜單，當(dāng)用戶將鼠標(biāo)懸停于主菜單項(xiàng)時(shí)下拉顯示子菜單項(xiàng)，展現(xiàn)更為豐富的內(nèi)容，在網(wǎng)頁設(shè)計(jì)中應(yīng)用非常廣泛。本節(jié)設(shè)計(jì)一個(gè)如圖7-10所示的下拉式菜單，網(wǎng)頁初始顯示效果如圖7-10a所示，鼠標(biāo)懸停于第3個(gè)菜單項(xiàng)時(shí)，下拉顯示其子菜單項(xiàng)，如圖7-10b所示。詳細(xì)要求如下。1）下拉子菜單懸浮于網(wǎng)頁上，不占位置，不影響網(wǎng)頁基本布局。2）鼠標(biāo)懸停于主菜單項(xiàng)時(shí)下拉顯示對(duì)應(yīng)子菜單項(xiàng)，鼠標(biāo)離開時(shí)隱藏子菜單項(xiàng)。a)初始顯示效果

b)菜單下拉顯示效果圖7-10下拉式菜單《Web前端開發(fā)任務(wù)式教程》元素定位2.項(xiàng)目創(chuàng)建與資源準(zhǔn)備本項(xiàng)目不需要資源，直接新建HTML項(xiàng)目即可。3.HTML內(nèi)容設(shè)計(jì)使用嵌套的無序列表顯示菜單項(xiàng)內(nèi)容。4.CSS樣式設(shè)計(jì)（1）設(shè)計(jì)元素基本樣式基本樣式按照常規(guī)美觀性要求直接設(shè)計(jì)即可。（2）設(shè)計(jì)鼠標(biāo)懸停時(shí)元素的顯示樣式按照常規(guī)美觀性要求直接設(shè)計(jì)即可。（3）設(shè)計(jì)子絕父相定位主菜單項(xiàng)是父元素，使用相對(duì)定位，下拉菜單項(xiàng)是子元素，使用絕對(duì)定位?！禬eb前端開發(fā)任務(wù)式教程》元素定位7.2.4設(shè)計(jì)彈出式菜單1.需求說明網(wǎng)頁右側(cè)的即時(shí)菜單往往使用彈出式菜單，當(dāng)用戶將鼠標(biāo)懸停于主菜單項(xiàng)時(shí)彈出顯示子菜單項(xiàng)，展現(xiàn)更為豐富的內(nèi)容，在網(wǎng)頁設(shè)計(jì)中應(yīng)用非常廣泛。本節(jié)設(shè)計(jì)一個(gè)如圖7-11所示的彈出式菜單，網(wǎng)頁初始顯示效果如圖7-11a所示，鼠標(biāo)懸停于第1個(gè)菜單項(xiàng)時(shí)，彈出顯示其子菜單項(xiàng)，如圖7-11b所示。詳細(xì)要求如下。1）主菜單固定在網(wǎng)頁右側(cè)，接近瀏覽器中間的位置。2）菜單項(xiàng)整體懸浮于網(wǎng)頁上，不占位置，不影響網(wǎng)頁基本布局。3）鼠標(biāo)懸停于主菜單項(xiàng)時(shí)彈出顯示子菜單項(xiàng)，鼠標(biāo)離開時(shí)隱藏子菜單項(xiàng)?！禬eb前端開發(fā)任務(wù)式教程》a)初始顯示效果b)彈出子菜單顯示效果圖7-11彈出式菜單元素定位2.項(xiàng)目創(chuàng)建與資源準(zhǔn)備本項(xiàng)目不需要資源，直接新建HTML項(xiàng)目即可。3.HTML內(nèi)容設(shè)計(jì)使用button元素顯示主菜單項(xiàng)，使用a元素顯示子菜單項(xiàng)，基于分析創(chuàng)建HTML文件。4.CSS樣式設(shè)計(jì)（1）設(shè)計(jì)元素基本樣式基本樣式按照常規(guī)美觀性要求直接設(shè)計(jì)即可。（2）設(shè)計(jì)鼠標(biāo)懸停時(shí)元素的顯示樣式按照常規(guī)美觀性要求直接設(shè)計(jì)即可。（3）設(shè)計(jì)子絕父相定位主菜單項(xiàng)是父元素，使用相對(duì)定位，彈出式菜單項(xiàng)是子元素，使用絕