CSS基本布局——定位

目录

1. 为什么使用定位

2. 定位详解

2.1 边偏移

2.2 定位模式 (position)

静态定位(static)（废物）

相对定位(relative)

绝对定位(absolute)

固定定位(fixed)

3. 定位(position)的扩展

3.1 绝对定位的盒子居中

3.2 堆叠顺序（z-index）

3.3 定位改变display属性

4. 定位小结

5. 网页布局总结

1). 标准流

2). 浮动

3). 定位

---

---

定位(position)
1. 为什么使用定位

1. 要实现的效果，标准流或浮动都无法快速实
2. 将盒子定在某一个位置 自由的漂浮在其他盒子(包括标准流和浮动)的上面

所以，我们脑海应该有三种布局机制的上下顺序

标准流在最底层 (海底) ------- 浮动 的盒子 在 中间层 (海面) ------- 定位的盒子 在 最上层 （天空）

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 属性定义元素的定位模式ÿ