[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>