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>

css z-index 属性 虽然我定义了位置 属性 但它不起作用

css z-index property is not working though I define the position property

css

z-index

css z-index 属性虽然我定义了位置属性但它不起作用