CSS中,position的绝对定位和相对定位的区别
1、position的四个值:static、relative、absolute、fixed
绝对定位:absolute和fixed统称为绝对定位
相对定位:relative
默认值:static
2、relative定位和absolute定位的区别
relative:相对于原来的位置移动,元素设置此属性之后依旧处于文档流中,不影响其他元素的布局,最外层容器设置为relative定位,在没有设置宽度的情况下,宽度是整个浏览器的宽度
absolute:元素会脱离文档流,如果设计偏移量,会影响其他元素的位置定位。定位是相对于离元素最近的设置了绝对或相对定位的父元素决定的,如果没有父元素设置绝对定位或相对定位,则元素相对于根元素即html元素定位。设置了absolute的元素脱了文档流,元素在没有设置宽度的情况下,宽度由元素里面的内容决定。脱离后原来的位置相当于是空的,下面的元素会来占据位置
3、relative和absolute定位的原理剖析
没有设置position时的效果
以下是显示效果
①absolute的定位原理
1、在父元素没有设置相对定位或者绝对定位的情
况下,元素相对于根元素定位
父元素没有设置相对定位或者绝对定位,app_name就相对于根元素定位了
2、父元素设置了相对定位或者绝对定位,元素会相对于离自己最近的设置了相对定位或者绝对定位的父元素进行定位
如果觉得《CSS中 position的绝对定位和相对定位的区别》对你有帮助,请点赞、收藏,并留下你的观点哦!