相对定位和绝对定位

相对定位和绝对定位

除了基于“文档流”的定位,CSS还定义了标签的其他定位方式,CSS使用position属性指定标签的定位方式
position的值

static,默认值,即使用基于“文档流”的定位
relative,相对定位,即在“文档流”的基础上,结合left和top属性,相对定位
absolute,绝对定位,即脱离“文档流”,并基于它的“包含框”,使用left和top属性来定位
fixed,固定定位,即特殊的绝对定位,即它的“包含框”为浏览器

position:relative;(相对定位)

注意:
相对与原来的位置,使用left,right进行偏移
原来的位置对于后继元素的定位(float)依然有效
对于使用float的元素,realative也同样起作用

position:absolute;(绝对定位)

注意:
绝对定位脱离了”文档流“,
使用绝对定位时,注意找准”包含框“,即包含该标签,并且距它最近的,position不等于static的标签
如果没有,那么将以浏览器左上角为准来定位
特别
只定义position:absolute;没设置left和top,标签位置仍安“文档流”定位,但已经“脱离文档流”

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值