html的定位类型

1.静态定位

静态定位的标签默认的定位方式,当position属性的取值为ststic时,可以将标签定位于静态位置。任何标签在默认的状态下都会以静态定位来确定自己的位置,所有当没有定义position属性时,并不是说明该标签没有自己的位置,它会遵循默认值显示为静态位置。在静态定位状态下,我们无法通过边偏移属性(top、bottom、left、right)来改变标签的位置。
在这里插入图片描述
在这里插入图片描述

2.相对定位

相对定位是将标签相对于它在标准文档流中的位置进行定位,当position属性的取值为relative是,可以将标签相对定位。我们可以通过边偏移属性改变标签的位置,但是它在文档流中的位置仍然保留。
在这里插入图片描述
在这里插入图片描述

3.绝对定位

绝对定位是将标签依据最近的已经定位的父标签进行定位,若所有父标签都没有定位,设置绝对定位的标签会依据body根标签进行定位。当position属性的取值为absolute是,可以将标签的定位模式设置为绝对定位。
在这里插入图片描述
在这里插入图片描述

4.固定定位

固定定位是绝对定位的一种特殊形式,它以浏览器窗口作为参照物来定义网页标签。当position属性的取值为fixed时,即可将标签的定位模式设置为固定定位。当对标签设置固定定位后,该标签将脱离文档流的控制,始终依据浏览器窗口来定位最近的显示位置。不管浏览器滚动条如何滚动,也不管浏览器窗口大小如何变化,该标签都会始终显示在浏览器窗口的固定位置。
在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值