CSS之定位

相对定位

1. 如何设置？

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

2. 相对定位参考点在哪里？

相对自己原来的位置。

3. 相对定位元素的特点

• 不会脱离文档流，元素位置的变化，只是视觉上的效果变化，不会对其他元素产生任何影响。
• 定位元素的显示层级比普通元素高，所有的定位，显示层级都一样。
  • 默认规则是：
  • 定位的元素会盖在普通元素之上
  • 都发生定位的两个元素，后写的元素会盖在先写的元素之上。
• left不能和right一起设置。top和bottom不能一起设置
• 相对定位的元素，也能继续浮动，但不推荐。
• 相对定位的元素，也能通过margin调整位置，但不推荐。
  注意：绝大多数情况，相对定位，会与绝对定位配合使用。

绝对定位

1. 如何设置

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

2. 绝对定位的参考点在哪里？

• 参考它的包含块。

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

3. 绝对定位元素的特点

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

何为定位元素？ --- 默认宽、高都被内容所撑开，且能自由设置宽高。

固定定位

1. 如何设置

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

2. 固定定位参考点在哪里？

• 参考它的视口

什么是视口？ --- 对于PC浏览器来说，视口就是我们看网页的那扇"窗户"。

3. 固定定位元素的特点

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

粘性定位

1. 如何设置？

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

2. 粘性定位的参考点在哪里？

• 离它最近的一个拥有滚动机制的祖先元素，即便整个祖先不是最近的真实的滚动祖先。

3. 粘性定位元素的特点

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

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

定位的层级

1. 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
2. 如果位置发生重叠，默认情况是：后面的元素，会显示在前面元素之上。
3. 可以通过css属性z-index来调整元素的显示层级。
4. z-index的属性值是数字，没有单位，值越大显示层级越高。
5. 只有定位的元素设置z-index才有效。
6. 如果z-index值大的元素，依然没有覆盖掉z-index值小的元素，那么请检查包含块的层级。

定位的特殊应用

注意：
	1. 发生固定定位、绝对定位后，元素都变成了定位元素，默认宽高被内容撑开，
	且依然可以设置宽高。
	2. 发生相对定位后，元素依然是之前的显示模式。
	3. 以下所说的特殊应用，只针对 绝对定位 与 相对定位 的元素	，
	不包括相对定位的元素。

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

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

让定位元素包含块居中

	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;

注意：该定位的元素必须设置宽高！！！