举例详解CSS的z

一般觉得HTML网页页面是2维的，但具体上，CSS也有1个z-index特性，容许堆叠元素。

    全部的盒实体模型元素都处在3维座标系中。 除大家常见的横座标和纵座标， 盒实体模型元素还能够沿着“z轴”堆叠放置， 当她们互相遮盖时， z轴次序就变得10分关键。

-- CSS 2.1 Section 9.9.1 - Layered presentation
默认设置的放置标准

假设元素沒有特定z-index特性，那末元素依照以下次序叠放（从底到顶）

    根元素的情况和界限
    一般流(无精准定位)里的块元素(沒有position或position:static;)按HTML中的出現次序层叠
    精准定位元素按HTML中的出現次序层叠
   

波动

针对波动的块元向来说，层叠次序变得一些不一样。波动块元素被置放于非精准定位块元素与精准定位块元素之间：

    根元素的情况与边框
    坐落于一般流中的子孙后代块元素依照它们在 HTML 中出現的次序层叠
    波动块元素
    基本流中的子孙后代行内元素
    子孙后代中的精准定位元素依照它们在 HTML 中出現的次序层叠

应用 z-index

假如必须更改默认设置的放置次序，只需给元素特定z-index。z-index务必是整数金额，反映了元素在z轴的部位：

    最底层：间距观查者最远
    ……
    ⑶ 层
    ⑵ 层
    ⑴ 层
    0 层 （默认设置）
    1 层
    2 层
    3 层
    ……
    高层：最贴近观查者

沒有特定z-index的情况下，全部元素默认设置在0层3D渲染。好几个元素的z-index特性同样时，将依照上文叙述的次序合理布局。

应用z-index排列的事例：

留意，div#5的z-index失效，由于未特定position特性。
层叠左右文

特定z-index特性将结构1个层叠左右文。

下列元素组成层叠左右文指：

    根元素html
    精准定位元素，且其z-index值不为auto
    opacity小于1的元素
    在挪动WebKit、Chrome22+以上，特定position: fixed的元素一直会结构层叠左右文，即便z-index为auto。

层叠左右文中的子元素依照前述次序放置。层叠左右文內部的子层叠左右文的z-index只在父层叠左右文中成心义。

总而言之：

    z-index不为auto，opacity小于1的元素会搭建层叠左右文。
    层叠左右文能够嵌入别的层叠左右文。
    每一个层叠左右文和它的同级左右文是单独的。
    每一个层叠左右文是自包括的。