定位的概念
1. 为什么需要定位?
- 某个元素可以自由的在一个盒子内移动,并且压住其他盒子
- 当我们滚动窗口的时候,盒子是固定屏幕某个位置的
2. 定位组成
定位:将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子。
定位 = 定位模式 + 边偏移
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。
(1) 定位模式
定位模式决定元素的定位方式,它通过CSS的position属性来设置,其值可以分为四个:
| 值 | 语义 |
|---|---|
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
(2)边偏移
边偏移就是定位的盒子移动到最终位置,有top、bottom、left 和 right 四个属性。
| 边偏移属性 | 示例 描述 |
|---|---|
| top | top:80px 顶端偏移量,定义元素相对于其父元素上边线的距离 |
| bottom | bottom:80px 底部偏移量,定义元素相对于其父元素下边线的距离 |
| absolute | absolute:80px 左侧偏移量,定义元素相对于其父元素左边线的距离 |
| fixed | fixed:80px 右侧偏移量,定义元素相对于其父元素右边线的距离 |
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!
