Position的屬性和屬性值及差別

2021-08-16 11:43:22 字數 993 閱讀 9561

position的四個屬性

1.relative:生成相對定位的元素,通過top,bottom,left,right的設定相對於其正常(原先本身)位置進行定位。可通過z-index進行層次分級。

2.absolute:生成絕對定位的元素,相對於 static 定位以外的第乙個父元素進行定位。元素的位置通過 「left」, 「top」, 「right」 以及 「bottom」 屬性進行規定。可通過z-index進行層次分級。

3.fixed:生成絕對定位的元素,相對於瀏覽器視窗進行定位。元素的位置通過 「left」, 「top」, 「right」 以及 「bottom」 屬性進行規定。可通過z-index進行層次分級。

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

position屬性的差別

1.position: relative;不會脫離文件流,position: fixed;position: absolute;會脫離文件流

2.position: relative; 相對於自己在文件流中的初始位置偏移定位。

3.position: fixed; 相對於瀏覽器視窗定位。

4.position: absolute; 是相對於父級非position:static 瀏覽器定位。

如果沒有任何乙個父級元素是非position:static屬性,則會相對於文件定位。

這裡它的父級元素是包含爺爺級元素、祖爺爺級元素、祖宗十八代級元素的。任意一級都可以。

如果它的父級元素和爺爺級元素都是非position:static 屬性,則,它會選擇距離最近的父元素。

position 的屬性值

理論上來說,全部 position 的取值有8個 包括 position static relative absolute fixed sticky initial inherit unset 其中最常用的是 static relative absolute fixed 和 sticky initi...

css的position屬性值

css樣式表中的position屬性詳細說明 在css中關於position定位的內容是 position relative absolute static fixed static 靜態 沒有特別的設定,遵循基本的定位規定,不能通過z index進行層次分級。relative 相對定位 物件不可層...

Position屬性四個值

1 static 靜態定位 預設值。沒有定位,元素出現在正常的流中 忽略 top,bottom,left,right 或者 z index 宣告 2 fixed 固定定位 生成絕對定位的元素,相對於瀏覽器視窗進行定位 元素的位置通過 left top right 以及 bottom 屬性進行規定。可...