目录
定位(position)
1. 为什么使用定位
- 要实现的效果,标准流或浮动都无法快速实
- 将盒子定在某一个位置 自由的漂浮在其他盒子(包括标准流和浮动)的上面
所以,我们脑海应该有三种布局机制的上下顺序
标准流在最底层 (海底) ------- 浮动 的盒子 在 中间层 (海面) ------- 定位的盒子 在 最上层 (天空)
2. 定位详解
定位也是用来布局的,它有两部分组成:
定位 = 定位模式 + 边偏移
2.1 边偏移
简单说, 我们定位的盒子,是通过边偏移来移动位置的。
在 CSS 中,通过 top、bottom、left 和 right 属性定义元素的边偏移:(方位名词)
边偏移属性 | 示例 | 描述 |
top | top: 80px | 顶端偏移量,定义元素相对于其父元素上边线的距离。 |
bottom | bottom: 80px | 底部偏移量,定义元素相对于其父元素下边线的距离。 |
left | left: 80px | 左侧偏移量,定义元素相对于其父元素左边线的距离。 |
right | right: 80px | 右侧偏移量,定义元素相对于其父元素右边线的距离。 |
定位的盒子有了边偏移才有价值。 一般情况下,凡是有定位地方必定有边偏移。
2.2 定位模式 (position)
在 CSS 中,通过 position 属性定义元素的定位模式ÿ