十七、学会定位，你想让盒子放在哪儿就放在哪里（1）之子绝父相

网页常见的布局方式

标准流、浮动、定位 都是常见的网页布局形式。

标准流布局方式中，块级元素独占一行，就是垂直布局；

行内元素或者行内块元素，一行显示多个，即水平布局；

浮动可以让原本垂直布局的块级元素，变成水平布局；

定位可以让元素自由的摆放位置，可以放在网页的任意位置，一般用于盒子之间的 层叠 情况

定位 可以解决盒子与盒子之间的层叠问题，定位之后的元素 层级最高 ，可以层叠在其它盒子上面，并让盒子始终固定在网页中的某个位置。

定位的基本使用

一般盒子与盒子之间的层叠问题，推荐用定位 来解决，定位的属性是 position，常见的属性值有：

• 静态定位 static
• 相对定位 relative
• 绝对定位 absolute
• 固定定位 fixed

此外，还可以设置偏移值，偏移值 分为两个方向，设置偏移值时，水平方向和垂直方向各选一个就可以了，选取的原则 一般是 就近原则，简单来说就是离哪边近，就选用哪个：

（1）静态定位

定位的 默认值 是静态定位，就是我们所说的标准流，它不能通过 方位属性 进行移动，常写作 position:static

后边所说的定位不包括静态定位，一般特指相对定位、绝对定位、固定定位

（2）相对定位

相对定位是 相对于自己 之前的位置进行移动，需要配合方位属性实现移动，在页面中 占有位置，并没有脱标。

相对定位适用于 小范围 的移动，配合绝对定位组 CP （ 子绝父相）

相对定位也可以看作是 自恋型定位，以自我为中心。

如果 left 和 right 同时设置了，以 left 为准，top 和 bottom 都设置了，则以 top 为准，一般实际应用中，水平、垂直各选其一。

CSS 推荐书写顺序：

• （1）定位、浮动、display
• （2）盒子模型
• （3）文字属性

（3）绝对定位

绝对定位可以看作是 拼爹型 定位，相对于非静态定位的父元素进行定位，需要配合方位属性实现移动，默认相对于浏览器可视区域进行移动，在页面中不占位置，已经 脱标。

绝对定位相对于谁移动？

祖先元素中没有定位的，默认相对于浏览器进行移动；

祖先元素中有定位的，相对于 最近的、有定位 的祖先元素进行移动

通俗来说，就是先找已经定位的父级，如果有这样的父级，就以这个父级为参照物进行定位；如果有父级，但父级没有定位，则以浏览器窗口为参照物进行定位。

例如：下例中，body 就是父级，但它没有定位，所以 类 box 盒子 以浏览器窗口为参照物，按照设置的方位进行移动，元素 脱标 ，不占有原来的位置，同时，标签的显示模式改变，具有 行内块 的特点，与其他元素在一行共存，宽高生效：

定位中最常用的 子绝父相

定位中最常用的组合 CP 子绝父相 ，即 子元素绝对定位，父元素相对定位 ，让子元素相对于父元素进行自由移动，这样做的好处是，父元素是相对定位，对网页布局影响最小。

在使用子绝父相定位的时候，一般子元素使用绝对定位，父元素使用相对定位，但如果发现父元素已经有 绝对定位了，此时子元素直接使用 子绝 即可，因为父元素已经有定位，就是已经满足要求了，如果盲目修改父元素的定位方式，可能会影响之前写好的布局。

绝对定位找父级的方式：就近找定位的父级，如果逐层查找，找不到这样的父级，就以浏览器窗口为参照进行定位

案例1 ：使用子绝父相，让子盒子在父盒子中水平居中（父元素任意宽度下都能实现）

往下移动的方式与往右移动方式类似，以子盒子往右移动为例：

首先，使用子绝父相定位，先让子盒子往右移动 父盒子 的一半；

再让子盒子往左移动 自己的一半，这里有两种实现方式，第一种可以使用 左边距 来实现，将左边外边距的值设置成负的子盒子宽度的一半，但这样做有个 缺点 ，如果子盒子的 宽度改变 后，需要重新修改代码，不利于维护

第二种方式是使用 transform，在下例中，意思是让子盒子沿着 x 轴负方向（向左边）始终移动自己宽度的一半，不管子盒子宽度如何让变化，都不需要再修改代码

案例2 ：底部半透明遮罩效果

需要注意的是，绝对定位的元素会脱标，脱标后的元素宽高默认由内容撑开，如下图中的阴影部分，如果没有设置宽度、高度，并且没有内容，那么盒子的尺寸就是 0：

之前说过，绝对定位的盒子显示模式具备行内块的特点，即加宽高生效，如果子级和父级的宽度相同，那么子集的宽度可以用 width:100%;来表示