1) 该元素与在它前面或者后面的元素共享着相同的stack context，这也就是我们改变z-index的值，元素会移动其他元素前后者后的原因。
2) 为该元素内的任何元素创建了一个新的stack context，一旦你创建了一个stack context，内部的任何有（stack context）的任何层都会停留在这个stack context。
通过上述的黄金法则，也许你已经知道上面那个问题的答案了。在黄金法则里，我们提到了个新名词“stack context”，下面我们通过一个实例来介绍它：
复制代码
<!DOCTYPE html>
<html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>z-index example</title>
</head>
<body>
<h1>Header</h1>
<p>I am paragraph. <em> I am em</em></p>
</body>
</html>
一个很特殊的情况是，在一个document中，没有任何定位，document有且只有一个堆叠环境 – 通过HTML创建。
下面我们给上例添加如下样式：
复制代码
h1, p {
position: relative;
}
h1 {
z-index: 2;
}
p {
z-index: 1;
}
在这种情况下，h1,p都创建了一个stack context,这两个stack context都在document的stack context内。增加样式后h1在p元素之上。如果我们给em元素增加如下样式结果又会怎样：
复制代码
h1, p, em {
position: relative;
}
h1 {
z-index: 2;
background-color: #f0f;
}
p {
z-index: 1;
background-color: #00f;
line-height: 40px;
}
em {
z-index: 1;
background-color: #f00;
}
增加此样式后em创建了stack context，由于em的z-index属性，它的内部的text比p标签中的其它text更接近用户。因为它是在p的stack context内部，它是一直比h1中的text低的。
注意：如果你增加z-index的值，是不能使用em位于h1之上的。如果你想一个context的元素位于另一个context中的元素之上，你必须提升整个context或者设置它们为相同的context。
下面是两种解决方案：
方案一：
复制代码
h1, p, em {
position: relative;
}
h1 {
z-index: 2;
background-color: #f0f;
}
p {
/* raise the entire context，p and em 都在h1 之上了*/
z-index: 3;
background-color: #00f;
line-height: 40px;
margin-top: -40px;
}
em {
z-index: 1;
background-color: #f00;
}
方案二：
复制代码
h1, p, em {
position: relative;
}
h1 {
z-index: 2;
background-color: #f0f;
}
p {
background-color: #00f;
line-height: 40px;
margin-top: -40px;
}
em {
