使用 z-index 时如何在不将所有其他元素 z-index 变为负值的情况下使 link 可点击？

Question

我正在尝试制作一个带有按钮和工具栏的下拉框，这样我的下拉菜单将位于工具栏后面但位于主要元素前面。问题是为了做到这一点，我使用负值的 z-index 因为在工具栏上使用正值会导致它由于定位和层次结构而落后于我的下拉框。

我知道，如果我将 DOM 中元素的 z-index 更改为更小的负值（如建议 here），这将使我的 link再次可点击，但这似乎是解决问题的一种非常低效的方法。另外，我不想弄乱工具栏并为每个按钮分解不同的元素，因为这可能会在未来导致很多响应问题。请看下面的 JFiddler link。

这是我的代码：

$('#btn2').on('click', function() {
  console.log('Click!');
  var element = document.getElementById("sub-memu");
  element.classList.toggle("show");
})

body {
  background-color: gray;
  height: 100vh;
  padding: 0px;
  margin: 0px;
}

.toolbar {
  height: 40px;
  background-image: linear-gradient(white, red);
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.35);
  position: relative;
}

.buttons {
  display: flex;
  flex-direction: row;
}

button {
  margin-right: 5px;
}

#sub-memu {
  position: absolute;
  display: flex;
  flex-direction: column;
  background-color: white;
  padding: 10px;
  min-width: 100px;
  z-index: -1;
  transform: translate(0px, -140%);
  transition: transform 1s;
}

main {
  padding: 10px;
  margin: 10px;
  background-color: yellow;
  height: calc(100% - 40px - 20px - 20px);
  position: relative;
  z-index: -2;
}

.show {
  transform: translate(0px, 25px) !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <div class='toolbar'>
    <div class='buttons'>
      <button id='btn1'>
        Button 1
      </button>
      <div class='btn-wrapper'>
        <button id='btn2'>
          Button 2
        </button>
        <div id='sub-memu' class='subMenu'>
          <a href='#'>Can you click me?</a>
          <a href='#'>Can you click me?</a>
          <a href='#'>Can you click me?</a>
          <a href='#'>Can you click me?</a>
        </div>
      </div>
    </div>
  </div>
  <main>
    This is my main element.
    <a href="#">You should be able to click me</a>.
  </main>
</body>

https://jsfiddle.net/atb8yq6e/1/

我想要实现的是在我的 JSFiddle link 中可以看到的相同行为（下拉框从导航栏后面但在我的主要内容前面）但是有 active links，无需遍历我的 DOM 树并将每个重叠元素的 z-index 更改为较低的数字。

提前谢谢大家，里尔.

Answer 1

只需在 #sub-memu 上将 z-index 设置为 1（可能应该是菜单？），然后删除 main 上的 z-index 值。

Answer 2

将 z-index 添加到 body 元素以确保创建堆叠上下文并避免元素位于它后面：

$('#btn2').on('click', function() {
  console.log('Click!');
  var element = document.getElementById("sub-memu");
  element.classList.toggle("show");
})

body {
  background-color: gray;
  height: 100vh;
  padding: 0px;
  margin: 0px;
  position:relative;
  z-index: 0;
}

.toolbar {
  height: 40px;
  background-image: linear-gradient(white, red);
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.35);
  position: relative;
}

.buttons {
  display: flex;
  flex-direction: row;
}

button {
  margin-right: 5px;
}

#sub-memu {
  position: absolute;
  display: flex;
  flex-direction: column;
  background-color: white;
  padding: 10px;
  min-width: 100px;
  z-index: -1;
  transform: translate(0px, -140%);
  transition: transform 1s;
}

main {
  padding: 10px;
  margin: 10px;
  background-color: yellow;
  height: calc(100% - 40px - 20px - 20px);
  position: relative;
  z-index: -2;
}

.show {
  transform: translate(0px, 25px) !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <div class='toolbar'>
    <div class='buttons'>
      <button id='btn1'>
        Button 1
      </button>
      <div class='btn-wrapper'>
        <button id='btn2'>
          Button 2
        </button>
        <div id='sub-memu' class='subMenu'>
          <a href='#'>Can you click me?</a>
          <a href='#'>Can you click me?</a>
          <a href='#'>Can you click me?</a>
          <a href='#'>Can you click me?</a>
        </div>
      </div>
    </div>
  </div>
  <main>
    This is my main element.
    <a href="#">You should be able to click me</a>.
  </main>
</body>

使用 z-index 时如何在不将所有其他元素 z-index 变为负值的情况下使 link 可点击？

How to make link clickable when using z-index without turning all other elements z-index negative?

html

javascript

css

z-index