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