用一个例子来解释CSSz-index属性的使用
本文主要介绍了CSS的z-index属性使用的一个例子。本文给出了布局示例的结构，需要的朋友可以参考。HTML页面通常被认为是二维的，但事实上，CSS有z-index属性允许层叠元素。
所有箱模型元件都在三维坐标系中，除了坐标和纵坐标外，箱模型元件也可以按照Z轴和堆叠放置。当它们相互覆盖时，Z轴的顺序变得非常重要。
- CSS 2.1节9.9.1分层呈现
默认的布局规则
假定元素没有指定z-index属性，然后元素堆叠，按下列顺序（从上到下）
根元素的背景和边界
在普通流（没有位置）中的块元素（没有位置或位置；静态）在HTML中按顺序堆积。
位置元素以HTML形式按顺序堆叠。
浮
对于浮动块元素，堆叠顺序变得有些不同。浮动块元素放置在非本地化块元素和位置块元素之间：
根元素的背景和框架
普通流中的后代块元素按照它们出现在HTML中的顺序堆积。
浮动块元素
正常流动中子孙后代的内部因素
子元素中的位置元素按照它们出现在HTML中的顺序堆积。
利用Z指数
如果你需要改变默认的订单，你只需要指定的element.z-index z-index必须是整数，反映在Z轴的元素的位置：
底部：离观察者最远
hellip；hellip；
3层
2层
1层
0层（默认）
1层
2层
3层
hellip；hellip；
最密切的观察者
当Z指数是没有指定，所有的元素都呈现在0层的默认。同时，多元素的z-index属性将按以上顺序。
利用Z指数排序的例子：
注意，# DIV 5 z-index无效，因为没有指定位置属性。
堆叠上下文
指定z-index将建立一个堆栈上下文。
以下元素构成堆栈上下文：
根元素的HTML
定位元件，其z-index值不是汽车
不透明度小于1个元素
在移动WebKit的，chrome22 +指定位置的元素：固定总是构建叠加的背景下，即使是汽车的特性。
在堆栈上下文的元素被放置在前面的秩序。在堆栈上下文堆栈上下文z-index只有在父堆栈上下文意义。
长话短说 uff1a
Z指数是不是汽车，和不透明度小于1的元素将建立堆栈上下文。
堆栈上下文可以嵌入到其他堆栈上下文中。
每个堆栈上下文及其级别上下文都是独立的。
每个堆栈上下文都是自包含的。