声明
定位元素：position属性值设置除默认值static以外的元素，包括relative，absolute，fixed。平台：win/IE win/FF
z-index
用来确定定位元素在垂直于显示屏方向（以下称为Z轴）上的层叠顺序
值：auto | 整数 | inherit默认：auto适用于：定位元素继承性：no
理解stacking context
每个box都归属于一个stacking context,它是元素在z轴方向上定位的参考。根元素形成 root stacking context，其他stacking context由定位元素设置z-index为非auto时产生。如#d
在网页设计中，CSS（Cascading Style Sheets）起着至关重要的作用，它允许我们对网页元素进行细致的样式控制，其中包括布局定位和元素的层叠顺序。本教程将深入探讨CSS中的定位机制以及`z-index`属性的使用。
我们需要理解CSS中的定位属性`position`。该属性用于声明元素的定位类型，它有四个可能的值：`static`（默认值）、`relative`、`absolute`和`fixed`。`static`表示元素按照正常的文档流进行布局，不进行任何特殊定位。而`relative`则相对其正常位置进行偏移，不会影响其他元素的位置。`absolute`则相对于最近的非`static`定位的祖先元素进行定位，如果找不到这样的祖先，则相对于根元素（通常是`body`）。`fixed`则是相对于浏览器窗口定位，即使在滚动页面时，元素的位置依然保持不变。
`z-index`属性用于确定定位元素在Z轴上的层叠顺序，也就是元素在屏幕垂直方向上的前后关系。它的值可以是`auto`、整数或`inherit`。默认值`auto`表示元素按其在HTML文档中的顺序堆叠。整数值越大，元素在Z轴上越靠前，即显示在上方。需要注意的是，`z-index`只适用于定位元素，即`position`属性不是`static`的元素。并且，`z-index`不具有继承性，每个元素都有自己的层叠上下文。
理解层叠上下文（stacking context）是掌握`z-index`的关键。每个CSS盒模型元素都属于一个层叠上下文，这个上下文定义了元素在Z轴上的排列顺序。根元素（通常是HTML元素）形成了根层叠上下文，而其他层叠上下文由定位元素设置`z-index`为非`auto`时产生。例如，给id为`div1`的元素设置`position: relative; z-index: 0;`会创建一个新的层叠上下文。
层叠上下文和包含块（containing block）的概念有所不同，一个元素的层叠上下文并不一定与它的包含块一致。在同一个层叠上下文中，元素的层叠级别（stack level）决定了它们的显示顺序。在同一层叠上下文里，层叠级别高的元素显示在前面，低的在后面。如果层叠级别相同，遵循后来者居上的原则，即后来被解析的元素显示在前面。
层叠级别的规则如下：
1. 父级层叠上下文的背景和边框。
2. z-index值为负数的定位元素，数值越小，位置越靠下。
3. 文本流中非定位的块级元素。
4. 文本流中非定位的浮动元素。
5. 能创建新的层叠上下文的内联元素。
6. z-index值为`auto`或0的定位元素。
7. z-index值为正数的定位元素，数值越大，位置越靠上。
在不同的浏览器中，层叠上下文和层叠级别的处理可能存在差异。例如，在Firefox 3.0中，上述规则得到了准确的实现，但在Firefox 2.0中，z-index值为负数的定位元素可能会出现在父级层叠上下文的背景和边框之前。而在IE6.0和7.0中，内联元素的层叠级别位于块级元素之前，并且浮动元素和非定位的块级元素处于相同的层叠级别。
了解这些规则后，我们可以更精确地控制网页元素的显示顺序，从而创建出复杂而富有层次感的网页布局。通过熟练运用`position`和`z-index`，我们可以创造出交互式、动态的用户界面，提升用户体验。
