Position定位相關屬性

2022-09-06 22:21:30 字數 593 閱讀 2662

語法:

position:absolute|relative|static|fixed|inherit

其中absolute、relative為常用屬性,常見形式為組合使用

absolute:絕對定位

1、如果要定位的元素a的父標籤沒有設定定位時,那麼a就相對於瀏覽器視窗絕對定位。

2、如果要定位的元素a,它的父標籤已經設定了position,且這個值不是預設的static,那麼a的絕對定位就相對於a的父標籤來定位。

3、設定了position為absolute的元素完全脫離標準流。

relative:相對定位

1、如果乙個元素設定了相對定位,那麼他的參考點是他自己。相對於他原來的位置,偏移了(left|right|top|bottom|)多少畫素,和margin很像,但不是margin。

2、設定了relative的元素並沒有脫離標準流,後面元素的排版受原本此元素的位置影響,和飄移的無關。

3、relative就像影子一樣,參見第二條。

static:該值為position的預設值

fixed

固定定位

1、此定位相對於瀏覽器視窗

2、脫離標準流

position 的相關屬性(絕對定位 相對定位)

是更具最近的定位父級進行定位的,如果沒有確定定位父級,就以瀏覽器視窗進行定位。比如 position absolute left 20px top 80px 這個容器始終位於距離瀏覽器左20px,距離瀏覽器上80px的這個位置。未設定 left top right bottom 的時候,元素還在自己...

CSS定位屬性 position 相關介紹

position屬性用來定義元素的定位方式。static 預設值 absolute 絕對定位 fixed 固定定位 relative 相對定位 sticky 粘性定位 css3新增 定位的作用 以下就五個屬性值展開介紹 一 position static 預設值,無定位 此時 top right b...

position定位屬性

position定位屬性設定值 absolute 絕對定位 脫離原普通流 依據父級 祖先級元素的位置進行定位 如果沒有父級元素,則參照body進行定位 relative 相對定位 相對於原位置的定位,仍然佔據原先普通流的位置 static 元素框正常生成。塊級元素生成乙個矩形框,作為文件流的一部分,...