position的定位详解

• static(默认定位)

• relative（相对定位）

  left、right、top、bottom 的调整都是 相对于当前元素 static 布局位置进行的调整。

  left：50px，表示距离自己原来位置左侧 50px top: 50px，表示距离自己原来位置顶部 50px

• absolute（绝对定位）而 absolute 是寻找最近的 非 static 的祖先节点进行偏移。

  1. 文档第一张下面的所有 DOM 元素，自动往上移动占据了第一张图片的位置，文档流（布局）已经没有为第一张图预留空间了

  2. 第一张图片脱离了文档流，变成了第二个图层，再在新的图层中往右下偏移 50px

  3. absolute 被称为 绝对定位 绝对定位不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置

• fixed（固定定位）

  固定定位和绝对定位类似，但元素的包含块为屏幕视口（viewport）

  固定定位不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。

• sticky（粘性定位）

  注意 MOUNTAIN 的效果，在它滚动到顶部时，黏在了顶部。而当页面往下面滚动时，MOUNTAIN 又会恢复其在文档中的位置，这种效果就是 sticky 的效果，我们看下代码

  h1 {
    position: sticky;
    color: yellowgreen;
    top: 50px;
    z-index:1;
  }