尽管 z-stack 发生了变化，但隐藏在半透明 div 后面的元素答案

【问题标题】：Elements hidden behind semi-transparent div despite changes in z-stack尽管 z-stack 发生了变化，但隐藏在半透明 div 后面的元素
【发布时间】：2021-11-30 06:57:13
【问题描述】：

我有两个按钮，我试图将它们放在半透明 div 的顶部，但由于某种原因，即使我更改了它们的 z-index 位置，它们仍然隐藏在后面。我不知道为什么会这样。如果有帮助，我目前正在使用 Bootstrap 5。代码如下：

.glass {
  height: 100vh;
  background: black;
  opacity: 0.25;
  border-radius: 25px 0 0 25px;
  position: relative;
  top: 0;
  right: 0;
  z-index: 0;
}

.log-in {
  position: static;
  right: 7em;
  margin: 1em;
  z-index: 1;
}

.sign-up {
  position: static;
  right: 0;
  margin: 1em;
  z-index: 1;
}

.btn {
  font-size: .9em;
  padding: .5em 5em;
  margin: 0 .5em;
  width: 5rem;
  color: white;
}

.pill {
  border-radius: 50px;
}

<div class="col-lg-5">

  <div class="glass">
    <ul class="navbar-nav">
      <li class="log-in nav-item nav-btn">
        <a class="pill btn btn-outline-light nav-link" href="#">Log In</a>
      </li>

      <li class="sign-up nav-item nav-btn">
        <a class="pill btn btn-light nav-link" href="#">Sign Up</a>
      </li>


    </ul>
  </div>
</div>

任何帮助将不胜感激！

编辑：

是的，将不透明度更改为 1 后，按钮完全可见。我遇到的问题是，当不透明度小于 1 时，按钮似乎也受此影响。它们应该是白色的，但它们显示为灰色。

【问题讨论】：

z-index 仅适用于定位元素。定位元素是一个，position 的值 不是默认值 static。
在提供的代码中，按钮好像在上面？
按钮在您提供的代码中，将 opacity 更改为 1 并显示在顶部。

标签： javascript html css css-position bootstrap-5

【解决方案1】：

原来我从父 .glass 类继承了 opacity 属性。为了解决我的问题，我使用 rgba(0,0,0,0.5); 而不是 opacity: 0.5; 按钮现在显示为完全不透明，尽管背景是透明的。

【讨论】：