html 的相對定位與絕對定位

2021-07-30 21:00:28 字數 515 閱讀 3019

css盒子的相對定位是相對原來的位置進行移動的。

該圖的意思是:框2相對定位,等於對框進行了偏移。該框對於原來的框的位置向下移動了20px,向左偏移了30px;**如下:

#box_relative
絕對定位:絕對定位的元素的位置相對於

最近的已定位祖先元素,如果元素沒有已定位的祖先元素,那麼它的位置相對於

最初的包含塊

因為絕對定位的框與文件流無關,所以它們可以覆蓋頁面上的其它元素。可以通過設定 

z-index 屬性

來控制這些框的堆放次序。

**如下:

#box_relative

HTML絕對定位與相對定位

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

HTML 相對定位和絕對定位

相信大家一直對前端中的相對定位和絕對定位有些模糊的概論,現在鼠光給大家講解一下 絕對定位 position obsolute 4個座標軸 top 頂 right 右 bottom 低 left 左 注釋 移動的元素,絕對定位,脫離文植流 不占用網頁空間 簡單的講 就是只要絕對定位後,你滑動網頁,定位...

絕對定位與相對定位

先看以下 效果 當設定child的div改為絕對定位後 效果 當父div沒設定絕對定位時,子絕對定位是相對於瀏覽器左上角座標,當時當父div設定了絕對或者相對定位後,效果如下 absolute 絕對定位 和 relative 相對定位 position absolute 意思是 絕對定位,他預設參照...