《Web前端開發(fā)基礎(chǔ)》課件-6-5元素定位

《web前端》課程任課教師：元素定位任務(wù)：二級(jí)導(dǎo)航的制作任務(wù)展示二級(jí)導(dǎo)航的實(shí)現(xiàn)2第一部分Knowledge元素的定位屬性1.定位方式-position在HTML中，可以使用CSS來對(duì)元素進(jìn)行定位，定位方式屬性用于設(shè)定瀏覽器應(yīng)如何來定位HTML元素。定位屬性定位一語法：position：static|absolute|fixed|relative2.元素位置top、right、bottom、left元素位置屬性與定位方式共同設(shè)置元素的具體位置.語法：top：auto|px|%共同定義1.定位方式-position：static定位屬性定位一static為默認(rèn)值。表示沒有定位，元素出現(xiàn)在正常的文檔流中(忽略top屬性、bottom屬性、left屬性、right屬性或者z-index屬性)。元素會(huì)按照HTML文檔中的順序顯示。2.定位方式-position：relative定位屬性定位一relative表示采用相對(duì)定位，對(duì)象不可層疊，但將依據(jù)left、top、right、bottom等屬性設(shè)置在頁面中的偏移位置。(即在文檔中仍占據(jù)原來的位置）仍占據(jù)原來的位置3.定位方式-position：absolute定位屬性定位一絕對(duì)定位是將元素依據(jù)最近的已經(jīng)定位(絕對(duì)、固定或相對(duì)定位)的父元素進(jìn)行定位，若所有父元素都沒有定位，則依據(jù)body根元素(瀏覽器窗口)進(jìn)行定位。當(dāng)position屬性的取值為abso1ute時(shí)，可以將元素的定位模式設(shè)置為絕對(duì)定位。4.定位方式-position：fixed定位屬性定位一fixed總是根據(jù)瀏覽器的窗口來進(jìn)行元素的定位，且不會(huì)隨著滾動(dòng)條的滾動(dòng)而改變。拖動(dòng)滾動(dòng)條，盒子位置不變層疊順序?qū)傩杂糜谠O(shè)定層的先后順序和覆蓋關(guān)系，該屬性實(shí)際是設(shè)置元素沿z軸的位置。默認(rèn)情況下，z-index值為1，擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。【取值auto表示遵從其父對(duì)象的定位；取數(shù)字值是必須是無單位的整數(shù)值，可以取負(fù)值?！孔⒁猓罕緦傩灾粚?duì)設(shè)置了定位屬性的盒子才起作用。語法：z-index:auto|數(shù)字說明：z-index值高的層覆蓋z-index值低的層。一般情況下，z-index值為1，表示該層位于最下層。層疊順序設(shè)置二1.層疊順序z-index。層疊順序設(shè)置二1.層