z-index:关于值大被值小覆盖的问题

原有一dom结构如下：

其css部分如下：

        .top{
            position: relative;
            width: 100%;
            height: 40px;
            background-color: antiquewhite;
            z-index: 1;
        }
        /*省略部分代码*/
        .bottom{
            width: 100%;
            height: 200px;
            background-color: aliceblue
        }

        .bottom ul{
            width: 100%;
            height: 100%;
        }

        .bottom ul li{
            position: relative;
            width: 80%;
            height: 30px;
            margin-bottom: 2px;

        }

        .bottom ul li .cover{
            position: absolute;
            width: 100%;
            height: 100%;
            top:0;
            left: 0;
            z-index: 3;
            background-color: aquamarine;
        }

原样式

想在top中添加一个相对定位的ul，如下：

        .top ul{
            position: absolute;
            width: 80%;
            left: 20px;
            top:10px;
            z-index: 4;
        }

        .top ul li{
            width: 80%;
            height: 30px;
            margin-bottom: 2px;
            background-color: blueviolet;
        }

期望是这个样子的：

预期效果

然而得到的结果是这个样子的：

开始结果

在浏览器中查看top中的ul的z-index值为4

`top`里的`ul`样式

bottom中的cover的z-index值为3

`bottom`下的`cover`

当元素之间重叠的时候，z-order 决定哪一个元素覆盖在其余元素的上方显示。 通常来说 z-index 较大的元素会覆盖较小的一个。

按照上面的理论来说，top的ul应该显示在上面，然后实际情况却相反。甚至top的ul的z-index值设置成 999 还是依旧在下面，那么问题出现在哪里呢？是否和其父元素的z-index值有关呢？

`top`

此处top的z-index值为1，将其改为4，OK；将其改为3，则否。而无论怎么修改top中ul的z-index值都不会影响到结果。

此处可以将top和bottom下的cover看做是同一层级的比较，z-index值相同时，后面的覆盖前面的；不同时，值大的覆盖值小的。

另一方面，将bottom设置成如下：

`bottom`

发现top的ul依旧被bottom下的cover覆盖，无论cover的z-index值是否为-1。

由此可知：在同一个dom元素下（如这里的box）,两个元素的z-index值的比较，实际是其设置了z-index值父元素的比较（或者说“仅拼爹”）。