相对定位 relative 和 绝对定位 absolute

1、absolute:绝对定位,相对最近父元素,原有空间不保留会被其他元素挤占。宽度为文本宽度,且宽度不会影响父元素宽度

2、relative:相对定位,相对自身原来位置,原有空间保留,不会被挤占。宽度为父元素宽度,且宽度会撑大/缩小父元素宽度

Position的属性值有

  1. Absolute:绝对定位,是相对于最近的且不是static定位的父元素来定位,如果没有父级元素,就以根节点
    
  2. Fixed:绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动。
    
  3. Relative:相对定位,是相对于其原本的位置来定位的。
    
  4. Static:默认值,没有定位。
    
  5. Inherit:继承父元素的position值。
    

(2)区别

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

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

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

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值