相對定位,絕對定位和固定定位的區別

2021-10-03 20:45:51 字數 1336 閱讀 6947

定位指的就是將指定的元素擺放到頁面的任意位置,通過定位可以任意的擺放元素, 通過position屬性來設定元素的定位

可選值:

static:預設值,元素沒有開啟定位

relative:開啟元素的相對定位

absolute:開啟元素的絕對定位

fixed:開啟元素的固定定位(也是絕對定位的一種)

1.當開啟了元素的相對定位以後,而不設定偏移量時,元素不會發生任何變化

2.相對定位是相對於元素在文件流中原來的位置進行定位

3.相對定位的元素不會脫離文件流(所以元素在文件流中的特徵他都包含)

4.相對定位會使元素提公升乙個層級

5.相對定位不會改變元素的性質,塊還是塊,行內還是行內

當開啟了元素的定位(position屬性值是乙個非static的值)時,可以通過left right top bottom四個屬性來設定元素的偏移量

left:元素相對於其定位位置的左側偏移量

right:元素相對於其定位位置的右側偏移量

top:元素相對於其定位位置的上邊的偏移量

bottom:元素相對於其定位位置下邊的偏移量

通常偏移量只需要使用兩個就可以對乙個元素進行定位,  一般選擇水平方向的乙個偏移量和垂直方向的偏移量來為乙個元素進行定位

1.開啟絕對定位,會使元素脫離文件流

2.開啟絕對定位以後,如果不設定偏移量,則元素的位置不會發生變化

3.絕對定位是相對於離他最近的開啟了定位的祖先元素進行定位的(一般情況,開啟了子元素的絕對定位都會同時開啟父元素的相對定位)如果所有的祖先元素都沒有開啟定位,則會相對於瀏覽器視窗進行定位

4.絕對定位會使元素提公升乙個層級

5.絕對定位會改變元素的性質, 行內元素變成塊元素,塊元素的寬度和高度預設都被內容撐開       

固定定位也是一種絕對定位,它的大部分特點都和絕對定位一樣 ,不同的是: 

固定定位永遠都會相對於瀏覽器視窗進行定位  ,固定定位會固定在瀏覽器視窗某個位置,不會隨滾動條滾動,ie6不支援固定定位

注:加了絕對定位和固定定位之後元素模式也會跟著變化,轉為行內塊。(行內塊的寬度和高度跟內容有關) 

注意:開啟固定定位的盒子居中:left:50%;再走自身寬度的一半:transform:translatex(-50%)

如果定位元素的層級是一樣,則下邊的元素會蓋住上邊的,通過z-index屬性可以用來設定元素的層級:

1.z-index的預設值是0,取值越大元素的層疊順序越靠上

2.可以為z-index指定乙個正整數作為值,值只能是數值,不能加單位,該值將會作為當前元素的層級,層級越高,越優先顯示

3.對於沒有開啟定位的元素不能使用z-index,父元素的層級再高,也不會蓋住子元素

相對定位,絕對定位和固定定位

1.脫標,但是保留原來位置 下面的盒子上不來,也可以說是半脫標 2.偏移從以自己標準流中的位置為原點 1.完全脫標,不保留原來位置 2.父元素沒有定位的情況,子盒子以當前螢幕為基準點進行移動 3.父元素有定位 相對,固定,絕對 的情況,子盒子以父元素 有定位的最近祖元素 為基準點進行移動 body ...

相對定位,絕對定位和固定定位

相對定位 relative 是相對於自己原本的位置進行偏移,但他仍在標準文件流中,且偏移前的位置會被保留 html lang en id father id first 第乙個盒子 id second 第二個盒子 第三個盒子 效果如下 向右偏移 left 20 px 向上偏移 top 20px 效果...

相對定位 絕對定位 固定定位

設定position屬性值為static的元素是乙個靜態定位元素,此值為預設值,即此元素在正常文件流中。設定position屬性為relative的元素是乙個相對定位元素,其定位的參照物為元素本身 即元素原本的位置進行定位 例項 parent child style class parent cla...