關於absolute和relative 的一些簡介

2021-09-25 22:42:05 字數 1002 閱讀 2744

**position:absolute; 他的意思是絕對定位,他是參照瀏覽器的左上角,配合top、right、bottom、left(下面簡稱trbl)進行定位,在沒有設定trbl,預設依據父級的做標原始點為原始點。如果設定trbl並且父級沒有設定position屬性,那麼當前的absolute則以瀏覽器左上角為原始點進行定位,位置將由trbl決定。**

**如果想為元素設定層模型中的絕對定位,需要設定position:absolute(表示絕對定位),這條語句的作用將元素從文件流中拖出來,然後使用left、right、top、bottom屬性相對於其最接近的乙個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊,則相對於body元素,即相對於瀏覽器視窗。**

物件脫離常規流,此時偏移屬性參照的是離自身最近的定位祖先元素,如果沒有定位的祖先元素,則一直回溯到body元素。盒子的偏移位置不影響常規流中的任何元素,其margin不與其他任何margin摺疊,而且,絕對定位層的margin:auto``會失效。

包裹性

破壞性**演示

//破壞性`

//包裹性 `

document

**如果想為元素設定層模型中的相對定位,需要設定position:relative(表示相對定位),它通過left、right、top、bottom屬性確定元素在正常文件流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成乙個元素(並且元素像層一樣浮動了起來),然後相對於以前的位置移動,移動的方向和幅度由left、right、top、bottom屬性確定,偏移前的位置保留不動。**

關於子元素的absolute定位

關於子元素 如div 在父元素 如div 中的定位問題 假設現有html 如下 class div1 class div2 test 想讓div2在div1中實現底部居中的效果,查詢資料發現關鍵步驟 css 是 div div2 在一篇文章看到以下內容,解釋得很清楚 position absolut...

relative 和 absolute 的位置區別

relative 和 absolute 的位置區別 position absolute 他的意思是絕對定位,他是參照瀏覽器的左上角,配合top right bottom left 下面簡稱trbl 進行定位,在沒有設定trbl,預設依據父級的做標原始點為原始點。如果設定trbl並且父級沒有設定pos...

大前端relative和absolute詳解

很多朋友問過我absolute與relative怎麼區分,怎麼用?我們都知道absolute是絕對定位,relative是相對定位,但是這個絕對與相對是什麼意思呢?絕對是什麼地方的絕對,相對又是相對於什麼地方而言的呢?那他們又有什麼樣的特性,可以做出什麼樣的效果呢?關於兩者之間又有什麼樣的技巧呢?下...