(五)定位

1. 为什么需要定位

一些固定盒子的效果,标准流或浮动都无法快速实现,此时需要定位来实现。所以:

浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子

定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子。

2. 定位组成

定位:将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子。

定位=定位模式+边偏移。

定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

2.1 定位模式

定位模式决定元素的定位方式,它通过 CSS 的 position 属性来设置,其值可以分为四个值:

例   position: relative;

     top: 100px;

语义

static

静态定位(无定位,相当于标准流,没有边偏移

relative

相对定位(相对于原来)

absolute

绝对定位

fixed

固定定位

2.2 边偏移

边偏移就是定位的盒子移动到最终位置。有 top, bottom, left 和 right 4 个属性

边偏移属性

示例

描述

top

top:80px

顶端偏移量,定义元素相对于其父元素上边线的距离。

bottom

bottom: 80px

底部偏移量,定义元素相对于其父元素下边线的距离。

left

left: 80px

左侧偏移量,定义元素相对于其父元素左边线的距离。

right

right: 80p

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值