黑马程序员技术交流社区

标题: 前端基础之定位 [打印本页]

---

作者: 彩虹哦    时间: 2018-9-14 13:52
标题: 前端基础之定位

CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流 浮动以及定位，定位是将盒子定在某一个位置，自由的漂浮在其他盒子的上面，很大程度上面丰富了页面内容，可以说CSS 离不开定位，特别是后面的 js 特效。

要了解定位我们首先必须知道定位也是用来布局的，它有两部分组成：定位 = 定位模式 + 边偏移

我们定位的盒子，就是通过边偏移来移动位置的，而定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式,定位模式总共有四种，分别如下：

1.静态定位(static)

  这个定位可以忽略不管，因为静态定位就是没有定位，我们基本用不上

2.相对定位(relative)

  相对定位是相对于自己原来在标准流中位置来移动的，

  原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它

3.绝对定位(absolute)

  绝对定位是完全脱标 —— 完全不占位置，

  父元素没有定位，则以浏览器为准定位（Document 文档）

  绝对定位的盒子要和父级搭配一起来使用的，我们一般父级用相对定位子集用绝对定位，口诀为子绝父相。

4.固定定位(fixed)

  固定定位跟父元素没有任何关系；单独使用的,不随滚动条滚动,

  固定定位移动的基准是当前页面的可视区域

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2