尽管我定义了位置属性，但 css z-index 属性不起作用[重复]答案

【问题标题】：css z-index property is not working though I define the position property [duplicate]尽管我定义了位置属性，但 css z-index 属性不起作用[重复]
【发布时间】：2019-12-17 00:27:07
【问题描述】：

我正在尝试使用 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;
}

&lt;a class="btn" href="#"&gt;Paynow&lt;/a&gt;

【问题讨论】：

“它不工作”是什么意思？
你的html中只有一个元素，你想在什么下面放什么？
stackoverflow.com/questions/14391208/…
检查重复项以了解为什么在向伪元素添加负数时不应在父元素上使用 z-index

标签： css z-index

【解决方案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;
}

&lt;a class="btn" href="#"&gt;Paynow&lt;/a&gt;

【讨论】：

嗨，如果我在 .btn 类中添加 z-index 属性，如 z-index: 10，并在伪类中使用 z-index:-1，它也不起作用.. 有没有请问这背后的逻辑？
您不需要在btn 上设置 z-index...这是不必要的。 Z-index 大于 1 的数字通常是。