定位和z-index

position 属性指定了元素的定位类型。 position 属性的四个值：

static
relative
fixed
absolute 元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

HTML文档元素除了在水平（X轴）和垂直（Y轴）方向进行布局以外，还会在第三维度Z轴进行布局，在多个元素位于同一个位置的时候，用来决定层叠关系（谁在上面，谁在下面）。

static 定位

HTML元素的默认值，即没有定位，元素出现在正常的流中。静态定位的元素不会受到 top, bottom, left, right影响。

元素的位置相对于浏览器窗口是固定位置。

如下代码，.fixed元素会定位在窗口的右上角

.fixed{
  position:fixed;
  top:0px;
  right:0px;
}

Fixed定位使元素的位置与文档流无关，因此不占据空间。 Fixed定位的元素和其他元素重叠。

相对定位元素的定位是相对其正常位置。

如下代码，.pos-rel元素会相对于他本应该在的位置向左移动20px

.pos-rel{
  position:relative;
  left:-20px;
}

relative 定位可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:

如下代码，.pos-abs元素会相对于他的第一个已定位元素距离左边100px,上边150px

.pos-abs{
  position:absolute;
  left:100px;
  top:150px;
}

absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素 z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面

该属性仅适用于定位元素。即元素的position属性为除static以外的值。

z-index属性赋值情况有以下三种：

值	描述
`auto`	默认, 会处理成`z-index=0`, 堆叠顺序与父元素相等。
`<integer>`	设置元素的堆叠顺序

简单来讲，元素的层叠顺序可以根据z-index的值进行判断，当z-index的值越大则越在上层，越小越在下层。