相對定位,絕對定位

2021-06-28 12:18:28 字數 663 閱讀 4268

絕對定位是相對于父標籤決定位置,一般用於相對定位標籤裡面,js特效經常用到。

相對定位是相對於上乙個相對定位的。一般用於浮動定位標籤裡面,一般跟絕對定位配合使用。

浮動定位才是常用的。

看例子:

以下只說id名代表div

絕對定位:position:absolute

如果bq1(絕對定位)外面沒有div等父標籤,bq1會以body為父標籤。左邊距距body 10畫素,上邊距距body 10畫素。

如果bq4(絕對定位)在bq3(相對定位)裡面,左邊距距bq3 10畫素,上邊距距bq3 10畫素。

相對定位:position:relative

bq2(相對定位)總是相對於前面的同級標籤為基準標籤(bq1)。

bq3以bq2為基準標籤。

這個簡單理解的話,有2點內容

第一,不管是什麼,既然要定位,就需要有乙個參照物

相對定位的參照物是本身。

絕對定位的參照物就是父級元素,當父級元素中不存在相對定位,那麼它的參照物就是body

第二,產生的影響

相對定位,設定後,原來的位置始終保留著

絕對定位,設定後,原來的位置會被後面的內容佔據

一般使用的話,看你需要實現什麼樣的效果,但基本基於上面2點內容來考慮。你稍微用幾次後就會有所體會的

相對定位 絕對定位

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

定位 絕對定位 相對定位

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

絕對定位和相對定位

換了乙個新工作,一上來就是改前台web頁面之類的東西,工作這麼久以來web css之類的只是皮毛級應用,知之勝少,搞乙個css定位之類的東西還讓我費了好大一番勁,丟人啊。研究了以下,稍微總結一下吧。絕對定位和相對定位 這裡以div容器為例 1 相對定位 元素框偏移某個距離。元素仍保持其未定位前的形狀...