css中position的詳解

2021-10-04 05:16:48 字數 700 閱讀 3082

position 屬性規定元素的定位型別。目前所有的瀏覽器均支援position定位。預設值為static。

這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位,不過絕對或固定元素會生成乙個塊級框,而不論該元素本身是什麼型別。相對定位元素會相對於它在正常流中的預設位置偏移。

(1)absolute

生成絕對定位的元素,相對於 static 定位以外的第乙個父元素進行定位。元素的位置通過 「left」, 「top」, 「right」 以及 「bottom」 屬性進行規定。

(2)fixed

生成固定定位的元素,相對於瀏覽器視窗進行定位。元素的位置通過 「left」, 「top」, 「right」 以及 「bottom」 屬性進行規定。

(3)relative

生成相對定位的元素,相對於其正常位置進行定位。因此,「left:20」 會向元素的 left 位置新增 20 畫素。

(4)static

預設值。沒有定位,元素出現在正常的流中(忽略 top, bottom, left, right 或者 z-index 宣告)。

(5)inherit

規定應該從父元素繼承 position 屬性的值。

css中的position定位詳解

position可以取四個值 static relative absolute fixed。static是盒子的預設的定位方式,即標準流方式。relative 它的定位基準是該盒子的標準流定位,即相對於標準流定位再進行偏移。如果某個盒子採用這個定位了,則它不會影響其父盒子的定位 對它後面的兄弟盒子而...

詳解CSS中的position定位

css使用position屬性定義物件定位顯示,語法如下 position static relative absolute fixed sticky css提供了三種基本的定位機制 文件流 浮動和絕對定位。除非專門定義,否則所有物件都在文件流中定位,也就是說流動元素的位置由元素在文件中的位置決定,...

css中position屬性使用詳解

css2.0的解釋 設定此屬性值為 absolute 會將物件拖離出正常的文件流絕對定位而不考慮它周圍內容的布局。假如其他具有不同 z index 屬性的物件已經佔據了給定的位置,他們之間不會相互影響,而會在同一位置層疊。此時物件不具有外補丁 margin 但仍有內補丁 padding 和邊框 bo...