html 定位z_index,绝对定位、固定定位和z-index

#### 绝对定位

* 一旦给元素加上`absolute`或`float`就相当于给元素加上了`display:block`

* `absolute`元素覆盖正常文档流内元素(不用设z-index，自然覆盖)

* 可以减少重绘和回流的开销(如`absolute+ top:-9999em`，或`absolute + visibility:hidden`，将动画效果放到`absolute`元素中)

#### 属性介绍

* `static`，默认值。位置设置为static的元素，它始终会处于文档流给予的位置。

* `inherit`，规定应该从父元素继承 position 属性的值。但是任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 “inherit”。

* `fixed`，生成绝对定位的元素。默认情况下，可定位于相对于浏览器窗口的指定坐标。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。不论窗口滚动与否，元素都会留在那个位置。但当祖先元素具有`transform`属性且不为none时，就会相对于祖先元素指定坐标，而不是浏览器窗口。

* `absolute`，生成绝对定位的元素，相对于距该元素最近的已定位的祖先元素进行定位。此元素的位置可通过 “left”、”top”、”right” 以及 “bottom” 属性来规定。

* `relative`，生成相对定位的元素，相对于该元素在文档中的初始位置进行定位。通过 “left”、”top”、”right” 以及 “bottom” 属性来设置此元素相对于自身位置的偏移。

浮动、绝对定位和固定定位会脱离文档流，相对定位不会脱离文档流，绝对定位相对于该元素最近的已定位的祖先元素，如果没有一个祖先元素设置定位，那么参照物是body层。

绝对定位相对于包含块的起始位置：

* 如果祖先元素是块级元素，包含块则设置为该元素的内边距边界。

* 如果祖先元素是行内元素，包含块则设置为该祖先元素的内容边界。

问答题：

* 定位的元素的起始位置为父包含块的内边距(不会在border里，除非使用负值，会在padding里)

* 定位的元素的margin还是能起作用的

* background属性是会显示在border里的

* z-index是有层叠层级的，需要考虑同一个层叠上下文的层叠优先级

* z-index是负值不会覆盖包含块的背景色(但是如果有内容，会被包含块的内容覆盖)

* z-index的值影响的元素是定位元素以及flex盒子

* 上面一个定位元素，下面一个正常流的元素，定位元素会覆盖在正常流元素之上，除非给z-index是负值

* 页面根元素html天生具有层叠上下文，称之为“根层叠上下文”