300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > 相对定位 relative 和 绝对定位 absolute

相对定位 relative 和 绝对定位 absolute

时间:2023-03-05 13:21:06

相关推荐

相对定位 relative 和 绝对定位 absolute

1、absolute:绝对定位,相对最近父元素,原有空间不保留会被其他元素挤占。宽度为文本宽度,且宽度不会影响父元素宽度2、relative:相对定位,相对自身原来位置,原有空间保留,不会被挤占。宽度为父元素宽度,且宽度会撑大/缩小父元素宽度

Position的属性值有

Absolute:绝对定位,是相对于最近的且不是static定位的父元素来定位,如果没有父级元素,就以根节点

Fixed:绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动。

Relative:相对定位,是相对于其原本的位置来定位的。

Static:默认值,没有定位。

Inherit:继承父元素的position值。

(2)区别

Absolution:元素会脱离文档流,定位是相对于离它最近的且不是static定位的父元素而言,若该元素没有设置宽度,则宽度由元素里面的内容决定,且宽度不会影响父元素,定位为absolution后,原来的位置相当于是空的,下面的的元素会来占据。

Relative:元素仍处于文档流中,定位是相对于原本自身的位置,若没有设置宽度,则宽度为父元素的宽度,该元素的大小会影响父元素的大小。

absolution 定位元素如果未设置宽度,其宽度会由内容撑开,如果设置了宽度,其子元素会继承宽度

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