z-index: 20

z-index是CSS属性之一，用于控制元素在层叠上下文中的显示顺序。它定义了元素在垂直方向上的堆叠顺序，具有较高z-index值的元素会覆盖具有较低z-index值的元素。

当多个元素重叠时，z-index可以用来确定哪个元素应该显示在其他元素的上方。z-index的值可以是正整数、负整数或auto。正整数表示元素在堆叠顺序中的优先级，较大的值表示较高的优先级。负整数表示元素在堆叠顺序中的较低优先级。auto表示元素的堆叠顺序由浏览器自动决定。

在给定的层叠上下文中，具有较高z-index值的元素会覆盖具有较低z-index值的元素。如果两个元素具有相同的z-index值，则后面出现在HTML文档中的元素会覆盖前面出现的元素。

需要注意的是，z-index只对定位元素（position属性值为relative、absolute或fixed）有效。对于非定位元素，默认的z-index值是auto，不会影响层叠顺序。

相关问题

z-index:-1

z-index是CSS中用于控制元素层级的属性，它的值越大，元素就越靠近顶部。而z-index:-1则是将元素的层级设置为最低，即在所有元素的下面，通常用于将一个元素作为背景。下面是一个例子：

<style>
    .background {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background-color: #f5f5f5;
    }
    .content {
        position: relative;
        z-index: 1;
        padding: 20px;
        background-color: #fff;
    }
</style>

<div class="background"></div>
<div class="content">
    这是内容区域
</div>

在上面的例子中，我们将一个div元素的z-index设置为-1，并将其作为背景，然后将另一个div元素的z-index设置为1，将其放在背景上面，作为内容区域。这样就可以实现一个简单的背景效果。

z-index: 2

根据提供的引用内容，z-index属性用于控制元素的堆叠顺序。当元素重叠时，z-index值越高的元素会覆盖z-index值较低的元素。因此，如果一个元素的z-index属性设置为2，则它将覆盖z-index值为1或0的元素。

以下是一个示例，其中元素A的z-index属性设置为2，因此它将覆盖元素B和C：

<div id="a" style="position:relative;z-index:2;">A</div>
<div id="b" style="position:relative;z-index:1;">B</div>
<div id="c" style="position:relative;z-index:0;">C</div>