個人總結css中的四種position定位

2022-08-17 15:30:18 字數 1114 閱讀 4019

1. positon:static; 靜態定位(預設的)  

所有標準文件流中的元素都是靜態定位

2. positon:relative;  相對定位

不脫離標準文件流,「老家留坑,形影分離」

特點:如果設定了相對定位並且設定了top、left、right、bottom屬性,那麼將來盒子會以盒子原來所在的位置進行偏移

相對定位的用途:一般不用於做「壓蓋效果」,就兩個作用:

(1)微調元素

(2)絕對定位的參考,子絕父相

可以用left、right來描述盒子右、左的偏移;可以用top、bottom來描述盒子下、上的偏移

position:relative;

top:10px;

left:10px; //相對於原來位置向右下移10px

position:relative;

top:-10px;

left:-10px; //相對於原來位置向左上移10px

3. position:absolute;  絕對定位

脫離標準文件流 

特點:(1)如果這個元素沒有父元素,那麼將來top、left、right、bottom是相對於瀏覽器視窗來定位的

(2)如果絕對定位的元素有父元素,但父元素沒有相對定位,那麼這個時候top、left、right、bottom還是相對於瀏覽視窗來定位的

(3)如果絕對定位的元素有父元素,而且父元素有定位(非static),那麼這個絕對定位的元素偏移是以自己的父元素為基礎

(4)絕對定位之後的元素在頁面上不會佔據位置

4. position:fixed;   固定定位

脫離標準文件流

固定定位的用途:頁面中的某些小廣告,需要固定在頁面中的乙個位置不變

總結:將來在寫頁面的時候,用的最多的不是絕對定位也不是相對定位,而是絕對定位與相對定位一起使用

規範:子絕父相(子元素使用絕對定位,父元素使用相對定位)

個人總結css中的四種position定位

1.positon static 靜態定位 預設的 所有標準文件流中的元素都是靜態定位 2.positon relative 相對定位 不脫離標準文件流,老家留坑,形影分離 特點 如果設定了相對定位並且設定了top left right bottom屬性,那麼將來盒子會以盒子原來所在的位置進行偏移 ...

CSS中的四種定位

簡介 偏移量 當元素開啟了定位以後,可以通過偏移量來設定元素的位置 相對定位 定位 positio 簡介 定位是一種更加高階的布局手段,通過定位可以將元素擺放到頁面的任意位置 使用position屬性來設定定位 static 預設值,元素是靜止的沒有開啟定位 relative 開啟元素的相對定位 a...

CSS中四種定位的區別

1 預設static 1 static表示沒有定位,或者說不算具有定位屬性。2 如果元素 position 屬性值為 static 或者未設 position 屬性 該元素出現在正常的流中 忽略 top,bottom,left,right 或者 z index 宣告 2 相對定位relative 佔...