CSS——position（定位）& z-index（优先级）

position属性规定应用于元素的定位方法的类型：

元素其实是使用top，bottom，left和right属性定位的。但是，除非首先设置了position属性，否则这些属性将不起作用。根据不同的position值，它们的工作方式也不同。

五种不同的位置值：

• static（静态）

1. HTML元素默认情况下的定位方式为static（静态）

2. 静态定位的元素不受top，bottom，left和right属性的影响

3. position：static；的元素不会以任何特殊方式定位，它始终根据页面的正常流进行定位。

div.static {
  position: static;
  border: 3px solid #73AD21;
}

• relative（相对定位）

1. 设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。

2. 以原来的盒子作为参考点

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

• fixed（固定定位）

1. 在网页中固定，即使滚动页面也不会变动。

2. 固定定位的元素不会再页面中通常应放置的位置上留出空隙。

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}

• absolute（绝对定位）

1. 绝对定位会以最近的以设置定位的父元素进行定位（除了static以外的任何元素）。

2. 如果没有任何父元素配置了定位，那么会以body当做父元素进行定位。

3. 会随着页面滚动一起移动

子绝父相案例：

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
} 

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

• sticky（粘性定位）

1. 会根据滚动位置进行定位

2. 粘性元素会根据滚轮位置在相对（relative）和固定（fixed）之间进行切换。起先它会被相对定位，知道在视口遇到给定位的偏移位置为止，然后将其“粘贴”在核实的位置。

3. Internet Explorer、Edge 15 以及更早的版本不支持粘性定位

4. 还必须至少指定 top、right、bottom 或 left 之一，以便粘性定位起作用。

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

z-index：

1. 当元素进行定位，并发生重叠时，会有覆盖效果。

2. 当使用z-index来进行优先级设置，就可以设置谁出现在最上面。

3. 可设置负值和正值进行优先级调整。

4. 如果两个定位的元素重叠而未指定z-index，则位于 HTML 代码中最后的元素将显示在顶部。

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}