HTML 相對定位和絕對定位

2021-09-20 07:14:33 字數 478 閱讀 1083

相信大家一直對前端中的相對定位和絕對定位有些模糊的概論,現在鼠光給大家講解一下

絕對定位:position:obsolute

4個座標軸:top(頂),right(右),bottom(低),left(左)

注釋:移動的元素,絕對定位,脫離文植流----不占用網頁空間

(簡單的講:就是只要絕對定位後,你滑動網頁,定位的東西不會隨之而動,一直在原地不動)

相對定位:position:relative

注釋:相對定位,不會脫離文植流----占用網頁空間

(簡單的講:就是只要相對定位後,你滑動網頁,定位的東西會相對與頁面隨之而動)

HTML絕對定位與相對定位

一開始接觸html和css時,不可避免地會遇到定位的問題,這時會很難分清楚絕對定位和相對定位區別,導致很多時候自己在用的時也是兩者都試試看,哪個好用哪個,這是不可取的。下面講述一下兩者的區別,並以自己過來人的身份提供一種簡單易記的方法。首先先在這裡引入w3c官方對這兩者的定義 css 相對定位 相對...

絕對定位和相對定位

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

相對定位和絕對定位

相對定位和絕對定位 定位標籤 position 包含屬性 relative 相對 absolute 絕對 1.position relative 如果對乙個元素進行相對定位,首先它將出現在它所在的位置上。然後通過設定垂直或水平位置,讓這個元素 相對於 它的原始起點進行移動。再一點,相對定位時,無論是...