失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > CSS中 position的绝对定位和相对定位的区别

CSS中 position的绝对定位和相对定位的区别

时间:2019-10-01 21:25:24

相关推荐

CSS中 position的绝对定位和相对定位的区别

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的绝对定位和相对定位的区别》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。