css z-index 属性不起作用，尽管我定义了位置属性

Question

我正在使用z-index尝试一个简单的事情。但它不起作用。谁能帮我？

请检查代码。蓝色背景应该在下面，但事实并非如此。

.btn {
padding: 15px 20px;
background: white;
border-radius: 20px;
border: 1px solid red;
position: relative;
z-index: 10;
}
.btn:before {
content: "";
width: 100%;
height: 100%;
background: blue;
position: absolute;
display: inline-block;
left: 0;
top: 0;
border-radius: 20px;
z-index: 5;
}

<a class="btn" href="#">Paynow</a>

Answer 1

将伪元素的z-index更改为-1。对于此示例，其他数字是无关紧要的。

.btn {
padding: 15px 20px;
/* background: white; */ not required if blue section is to be seen*/
border-radius: 20px;
border: 1px solid red;
position: relative;
color:white;
}
.btn:before {
content: "";
width: 100%;
height: 100%;
background: blue;
position: absolute;
display: inline-block;
left: 0;
top: 0;
border-radius: 20px;
z-index: -1;
}

<a class="btn" href="#">Paynow</a>