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