对于CSS当中z-index问题的研究

        今天复习到z-index，突然冒出了一个想法：我可不可以用这个把父盒子压在子盒子上面

        测试代码结构如下：

<div class="father">
		2222
		<div class="son">1111</div>
</div>

        样式如下：

.son {
			position: relative;
			top: 220px;
			left: 100px;
			width: 100px;
			height: 100px;
			background-color: #ccc;
			z-index: 1;
}

.father {
			position: relative;
			top: 100px;
			left: 100px;
			width: 300px;
			height: 300px;
			background-color: #aaa;
			z-index: 3;
}

        测试结果如下：

         不解，以为是继承优先级的事，但转念一想继承优先级本来就是最低，但我为子盒子的类设置了更低的z-index，理应被父盒子压住。

        于是做出尝试，将结构修改如下：

	<div class="father">
		2222
		<div class="son">1111</div>
	</div>
	<div class="uncle">3333</div>

        增加样式如下：

		.uncle {
			position: relative;
			top: 50px;
			left: 200px;
			height: 100px;
			width: 100px;
			background-color: #bbb;
			z-index: 2;
		}

      得到如下结果：

         可以看到，按原本的理解，应该将子盒子压住的伯父盒子却被子盒子盖住，也就是说，我为子盒子指定的z-index为1并没有起到作用。后来尝试将伯父盒子的z-index指定为4，发现子盒子被压住。得出子盒子的z-index为继承了父盒子的3。

        得出结论：子盒子的z-index会继承于父盒子，且后面再次对子盒子的z-index的值进行修改无法起作用。