定位:
(1):psition屬性可以控制Web瀏覽器如何以及在何處顯示特定的元素。
(2):可以使用position屬性把一個(gè)元素放置到網(wǎng)頁中的任何位置。
(3):可選值:
— static
— relative
— absolute
— fixed相對定位:
(1):每個(gè)元素在頁面的文檔流中都有一個(gè)自然位置。相對于這個(gè)位置對元素進(jìn)行移動(dòng)就稱為相對定位。周圍的元素完全不受此影響。
(2):當(dāng)將position屬性設(shè)置為relative時(shí),則開起了元素的相對定位。
(3):當(dāng)開啟了相對定位以后,可以使用top、right、bottom、left四個(gè)屬性對元素進(jìn)行定位。相對定位的特點(diǎn):
(1):如果不設(shè)置元素的偏移量,元素位置不會發(fā)生改變。
(2):相對定位不會使元素脫離文本流。元素在文本流中的位置不會改變。
(3):相對定位不會改變元素原來的特性。
(4):相對定位會使元素的層級提升,使元素可以覆蓋文本流中的元素。絕對定位:
(1):絕對定位指使元素相對于html元素或離他最近的祖先定位元素進(jìn)行定位。
(2):當(dāng)將position屬性設(shè)置為absolute時(shí),則開啟了元素的絕對定位。
(3):當(dāng)開啟了絕對定位以后,可以使用top、right、bottom、left四個(gè)屬性對元素進(jìn)行定位。絕對定位的特點(diǎn):
(1):絕對定位會使元素完全脫離文本流。
(2):絕對定位的塊元素的寬度會被其內(nèi)容撐開。
(3):絕對定位會使行內(nèi)元素變成塊元素。
(4):一般使用絕對定位是會同時(shí)為其父元素指定一個(gè)相對定位,以確保元素可以相對于父元素進(jìn)行定位。固定定位:
(1):固定定位的元素會被鎖定在屏幕的某個(gè)位置上,當(dāng)訪問者滾動(dòng)網(wǎng)頁是,固定元素會在屏幕上保持不動(dòng)。
(2):當(dāng)將position屬性設(shè)置為fixed時(shí),則開啟了元素的固定定位。
(3):當(dāng)開啟了固定定位以后,可以使用top、right、bottom、left四個(gè)屬性對元素進(jìn)行定位。
(4):固定定位的其他特性和絕對定位類似。
7.:-index:
(1):當(dāng)元素開啟定位以后就可以設(shè)置z-index這個(gè)屬性。
(2):這個(gè)屬性可以提升定位元素所在的層級。
(3):z-index可以指定一個(gè)整數(shù)作為參數(shù),值越大元素顯示的優(yōu)先級越高,也就是z-index值較大的元素會顯示在網(wǎng)頁的最上層。