前端筆記20 CSS絕對定位

2021-08-30 02:48:23 字數 352 閱讀 5240

前面一篇部落格,我們提到了相對定位。除了相對定位,我們還有乙個絕對定位。下面分享我學習到的絕對定位。

絕對定位使用的是position: absolute;定位需要乙個參照物:根據誰來做這個定位的?

查詢參照物順序:先找父級元素,如果有定位屬性(positon)就以這個元素作為參照物發生偏移。如果沒有找到就向外層逐一查詢,直到找到positon屬性的元素,如果一直都沒有,那麼就以最外層html元素作為參照物發生偏移。

**例項

只要複製下面的**,就可以看到絕對定位的效果。

前端CSS 相對定位,絕對定位,固定定位

position relative 必須先宣告,自己要相對定位了,left 100px 然後進行調整。top 150px 然後進行調整。相對定位不脫標,真實位置是在老家,只不過影子出去了,可以到處飄.position relative right 100px 往左邊移動 top 100px posi...

前端筆記 CSS定位

一 為什麼需要定位 某個元素可以自由的在乙個盒子內移動位置,並且壓住其他盒子。當滾動視窗時,某些模組是固定在螢幕中的某個位置。以上兩個效果通過標準流和浮動都無法快速實現,此時需要定位來實現。二 定位組成 定位 將盒子定在某一位置 定位 定位模式 邊偏移 定位模式用於指定元素在文件中的定位方式,邊偏移...

CSS 絕對定位

設定為絕對定位的元素框從文件流完全刪除,並相對於其包含塊定位,包含塊可能是文件中的另乙個元素或者是初始包含塊。元素原先在正常文件流中所佔的空間會關閉,就好像該元素原來不存在一樣。元素定位後生成乙個塊級框,而不論原來它在正常流中生成何種型別的框。絕對定位的元素的位置相對於最近的已定位祖先元素 如果元素...