第14章掌握CSS——定位定位分为4种定位，分别为绝对定位、相对定位、固定定位、粘性定位；且可以利用定位偏移量实现在包

1 定位概念

定位可以让某元素在某个盒子中自由地移动位置，或者让其固定在屏幕中的某个位置，来压住其它盒子。
定位的本质=定位模式➕偏移量

1.1 定位模式

1.2 偏移量

top、bottom、left以及right

2 相对定位

2.1 相对定位的设置方法

给元素设置 position:relative 即可实现相对定位。
可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。

div {
  position: relative;
  top: 100px;
  left: 200px;
}

2.2 相对定位的参考点

相对自己原来的位置（所谓相对原来位置是指以“原来位置”的左上角为中心原点，以过中心原点的宽度为X轴，以过中心原点的高度为Y轴。left是指该定位元素相对于中心原点向X轴正方向移动，top是指该定位元素相对于中心原点向Y轴正方向移动。）相对定位元素偏移量移动，如下图所示：

2.3 相对定位元素的特点

不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。
定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
默认规则是：
- 定位的元素会盖在普通元素之上。
- 都发生定位的两个元素，后写的元素会盖在先写的元素之上。
left 不能和 right 一起设置， top 和 bottom 不能一起设置。
相对定位的元素，也能继续浮动，但不推荐这样做。
相对行为的元素，也能通过 margin 调整位置，但不推荐这样做。

注意：绝大多数情况下，相对定位，会与绝对定位配合使用。

3 绝对定位

3.1 绝对定位的设置方法

给元素设置 position: absolute 即可实现绝对定位。
可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。

.father {
  position: relative;
}

.father span {
  position: absolute;
  top: 0;
  right: 0;
}

3.2 绝对定位的参考点

参考它的包含块。
什么是包含块？
1. 对于没有脱离文档流的元素：包含块就是父元素；
2. 对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果所有祖先都没定位，那包含块就是整个页面）。

3.3 绝对定位元素的特点

脱离文档流，不占位置，会对后面的兄弟元素、父元素有影响。
left 不能和 right 一起设置， top 和 bottom 不能一起设置。
绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主。
绝对定位的元素，也能通过 margin 调整位置，但不推荐这样做。
无论是什么元素（行内、行内块、块级）设置为绝对定位之后，都变成了定位元素。何为定位元素？ —— 默认宽、高都被内容所撑开，且能自由设置宽高。

⚠注意：
①何为定位元素？ —— 默认宽、高都被内容所撑开，且能自由设置宽高。
②绝对定位的偏移量是相对于包含块的边框所在四个边角。
③设置绝对定位的元素与设置浮动的元素都会脱离文档流，但是设置绝对定位的元素会完全挡住重新占有原位置的兄弟元素的盒子以及内容，不会让兄弟元素把内容甩出兄弟元素的盒子。

案例：移动盒子（京东的侧边导航）

移动盒子

4 固定定位

4.1 固定定位的设置方法

给元素设置 position: fixed 即可实现固定定位。可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。

div {
  position: fixed;
  top: 0;
  right: 0;
  width: 500px;
}

4.2 固定定位的参考点

参考它的视口

⚠注意：什么是视口？—— 对于 PC 浏览器来说，视口就是我们看网页的那扇“窗户”。

4.3 固定定位元素的特点

脱离文档流，会对后面的兄弟元素、父元素有影响。
left 不能和 right 一起设置， top 和 bottom 不能一起设置。
固定定位和浮动不能同时设置，如果同时设置，浮动失效，以固定定位为主。
固定定位的元素，也能通过 margin 调整位置，但不推荐这样做。
无论是什么元素（行内、行内块、块级）设置为固定定位之后，都变成了定位元素。

5 粘性定位

5.1 粘性定位的设置方法

给元素设置 position:sticky 即可实现粘性定位。
可以使用 left 、 right 、 top 、 bottom 四个属性调整位置，不过最常用的是 top 值。

5.2 粘性定位的参考点

离它最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先(没有滑块的滚动条 overflow：scroll）。.

5.3 粘性定位元素的特点

不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式。
最常用的值是 top 值。
粘性定位和浮动可以同时设置，但不推荐这样做。
粘性定位的元素，也能通过 margin 调整位置，但不推荐这样做。

⚠注意：粘性定位和相对定位的特点基本一致，不同的是：粘性定位可以在元素到达某个位置时将其固定。

案例：粘性定位示例（可做通讯录）：

粘性定位

6 定位层级

定位层级效果图定位元素层级

.box1 {
  background-color: pink;
  /* 取值是整数，默认是0，取值越大显示顺序越靠上 */
  z-index: 1;
}

.box2 {
  background-color: skyblue;
  left: 100px;
  top: 100px;

  z-index: 2;
}

7 定位的两个特殊应用

⚠️注意：

发生固定定位、绝对定位后，元素都变成了定位元素，默认宽高被内容撑开，且依然可以设置宽高。

发生相对定位后，元素依然是之前的显示模式。

以下所说的特殊应用，只针对 绝对定位 和 固定定位 的元素，不包括相对定位的元素。

7.1 让定位元素的宽充满包含块

块宽想与包含块一致，可以给定位元素同时设置 left 和 right 为 0 。
高度想与包含块一致， top 和 bottom 设置为 0 。

7.2 让定位元素在包含块中居中

定位元素在包含块中居中

方案一：让四个偏移量值为0

.element {
    position: absoulte;
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    margin: auto
}

方案二：设置左与上偏移量为50%以及设置左外边距与上外边距的值为负的宽度一半或者负的高度一半

.element {
    position: absoulte;
    left: 50%; 
    top: 50%; 
    margin-left: 负的宽度一半;
    margin-top: 负的高度一半;
}

方案三：设置左与上偏移量为50%以及借助transform:translate(-50%, -50%);声明块

 .element {
    position: absoulte;
    left: 50%; 
    top: 50%; 
     /* 方便： 50% 就是自己宽高的一半 */
    transform: translate(-50%, -50%);
}
 
}

⚠注意：三种方案，定位元素都必须设置宽高，不包括body作为父元素的情况。

第14章 掌握CSS——定位