相對定位vs絕對定位

2022-05-26 03:00:15 字數 1936 閱讀 5196

相對定位,

position: relative;

它會,相對它原來的位置的座標的左上角,進行偏移。

同時,它原來的位置會被保留

(相對定位的html容器,它雖然已經脫離了普通的文件流,

但它依然被視為普通文件流定位的一部分。)

口語化的描述,「我人不在這,但位置你得給我留著」。

絕對定位,

position:absolute;

它會,相對於整個文件的左上角原點的座標,進行偏移。

同時,它原來的位置,不會被保留。

(就是被新增了絕對定位的html標籤,

它會完全的脫離整個文件流

不再在頁面上占有空間。)

相對定位和絕對定位的區別:

1,定位座標不同;

2,相對定位原位置保留;絕對定位不保留。

當二個絕對定位的容器,發生重疊的時候,

如何決定重疊的順序?

1、html**中,哪個容器後被載入,哪個容器就處於「重疊的上面一層」。?先載入標準流?

2、z-index,用來設定「定位容器」的堆疊順序,它的值沒有單位。

z-index,理論上可以無限的往上加,

但事實上它受計算機數值極限的限制。

乙個絕對定位的容器,它的父容器是相對定位的時候,

這個絕對定位的容器,將以它的相對定位的父容器的左上角為原點,進行定位。

>左邊

div>

<

div

class

="sty3"

>右邊

相對定位,絕對定位

絕對定位是相對于父標籤決定位置,一般用於相對定位標籤裡面,js特效經常用到。相對定位是相對於上乙個相對定位的。一般用於浮動定位標籤裡面,一般跟絕對定位配合使用。浮動定位才是常用的。看例子 以下只說id名代表div 絕對定位 position absolute 如果bq1 絕對定位 外面沒有div等父...

相對定位 絕對定位

相對定位 相對自身位置進行定位 定位後 元素脫離文件流 原來的位置沒有被其他元素所佔據 元素特點沒有發生變化 top 移動後的位置距離起始位置 上面多遠 往下移動 left 移動後的位置距離起始位置 左邊多遠 往右移動 right 移動後的位置距離起始位置 右邊多遠 往左移動 bottom 移動後的...

定位 絕對定位 相對定位

定位是一種高階的布局手段 通過定位可以將元素擺放到頁面的任意位置 使用position屬性來設定定位當元素開啟了定位以後,可以通過偏移量來設定元素的位置 例如 top 100px bottom xxpx left right 注意 relative相對定位的參照元素是其本身在文件流中的位置進行定位 ...