position的8種定位方式(常用的是5種)


1.static

position的默認值,沒有定位,元素出現在正常的文檔流中

2.relative

相對定位,相對於正常位置定位,不會脫離文檔流

3.absolute

絕對定位,相對於最近的定位不為static的父元素進行定位。脫離了文檔流

4.fixed

固定定位,相對於瀏覽器窗口定位,不會跟隨屏幕滾動。生成絕對定位,脫離文檔流

5.sticky

粘性定位,它的行為就像 position:relativeposition:fixed的合體,當頁面滾動超出目標區域時,它會固定在設定位置。

后面幾種是不常用

6.inherit

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

inherit 關鍵字可用於任何 HTML 元素上的任何 CSS 屬性

兼容:ie7及以下版本不支持此屬性

7.initial

設置positon的值為默認值(static)

兼容:ie不支持此屬性

問:有了static為什么還會存在此屬性,不是多此一舉?

答:initial 關鍵字可用於任何 HTML 元素上的任何 CSS 屬性,不是postion特有的

8.unset

設置positon的值為不設置:

如果該屬性的默認屬性是 繼承屬性(例如字體相關的默認屬性基本都是繼承),該值等同於 inherit
如果該屬性的默認屬性 不是繼承屬性(例如pisition的默認屬性為static),該值等同於 initial

兼容:ie不支持此屬性


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM