关于层叠顺序z-index

background: background-color background-image background-repeat background-attachment background-position

1.关于层叠顺序

关于层叠顺序这个概念，我觉得是必须出现多个元素抢占同一个布局位置的这一个前提，否则就不需要控制它们在z轴上的位置了。也就是说，z-index就是控制一个元素在z轴上的显示顺序。

---

2.明确一下什么叫做抢占同一个布局位置

问：正常流布局中的父子元素有抢占同一个布局位置吗？要知道他们在xy平面上有重叠的地方，尽管如此，但是在这里我们并不把这称为有抢占同一个布局位置。那么什么时候出现的位置重叠才叫做抢占了同一个布局位置呢？我的理解(不知道正确与否)是这样的：在两个元素在DOM结构上不是父子之间关系(包括祖先与子孙一级的关系)的前提下，如果某个元素被某些css属性设置使其脱离了文档流，并且之后移位到了某个地方和某个元素在平面中有重合情况的话，那么就叫做抢占了同一个布局位置。

---

3怎么让多个元素竞争同一个布局位置

很多种方法，比如说使用非static，relative的定位，让多个元素去竞争同一个位置。它们都是从标准流中脱离出来了。因此在布局上会出现这种复杂的情况。那么问题来了，使用浮动元素来设置多个元素竞争同一个布局位置是否可行呢？答案是不行的，为什么呢？因为虽然浮动元素脱离了文档流，但是它仍然会影响后续布局，我们都知道浮动元素会使得元素呈现出块元素的模式，但是依我愚见我觉得是float是会使得元素变为inline-block。还有一个问题：为什么relative也不行呢？因为relative定位会使得元素保留原来的位置，也就是说如果自己原本属于block的话，那么设置为relative的话仍旧是block，若属于inline的话，那么设置为relative的话仍旧为inline的。

关于这些元素的包含块的问题，以前的笔记也提到过，这里就再写一下吧。烂笔头还是具有一点效应的。
relative||static：距离自己最近块元素的元素框(参见css权威指南p308，这个框我理解为border-box)、表单元格或者距离自己最近的祖先级行内元素的content-box。
absolute：距离自己最近的祖先级position非static的元素：

• 1.若为内联元素，那么则是这个内联元素的content-box
• 2.若为块元素，那么则是这个块元素的padding-box

float：距离自己最近的块级祖先元素。

---

先看看张鑫旭老师关于z-index的解释

---

4.需要注意的地方