本文摘自PHP中文网,作者Guanhui,侵删。
CSS Position属性值有:1、static,是position的默认值;2、fixed,生成固定定位的元素;3、absolute,生成绝对定位的元素;4、relative,生成相对定位的元素;5、inherit,继承父级属性值。
1、position: relative;相对定位
不影响元素本身特性(无论区块元素还是内联元素会保留其原本特性)
不会使元素脱离文档流(元素原本位置会被保留,即改变位置也不会占用新位置)
没有定位偏移量时对元素无影响(相对于自身原本位置进行偏移)
提升层级(用z-index样式的值可以改变一个定位元素的层级关系,从而改变元素的覆盖关系,值越大越在上面,z-index只能在position属性值为relative或absolute或fixed的元素上有效。) (两个都为定位元素,后面的会覆盖前面的定位)
2、position: absolute;绝对定位
使元素完全脱离文档流(在文档流中不再占位)
使内联元素在设置宽高的时候支持宽高(改变内联元素的特性)
使区块元素在未设置宽度时由内容撑开宽度(改变区块元素的特性)
相对于最近一个有定位的父元素偏移(若其父元素没有定位则逐层上找,直到document――页面文档对象)
相对定位一般配合绝对定位使用(将父元素设置相对定位,使其相对于父元素偏移)
提升层级(同相对定位)
3、position: fixed;固定定位
相关阅读 >>
更多相关阅读请进入《css》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者