在粘性元素上覆盖 CSS Stacking Context答案

【问题标题】：Override CSS Stacking Context on sticky elements在粘性元素上覆盖 CSS Stacking Context
【发布时间】：2021-10-11 12:36:42
【问题描述】：

我在表格中有一个列，其中单元格 - TD 元素具有位置：粘性（用于水平滚动）。单元格包含带有按钮的引导下拉菜单。随着每个 TD 元素创建自己的堆叠上下文（位置：粘性），下拉菜单会在这些元素下打开。 https://stackoverflow.com/a/63838447/11874413 的解决方案部分有效，因为菜单现在可见，但其中的按钮不可点击。

所以我的问题是：有没有办法让它们可点击？

原始问题的修改示例：

body {
  transform-style: preserve-3d; /* this is important for the trick to work */
}
.red, .green, .blue {
  position: absolute;
  width: 100px;
  color: white;
  line-height: 100px;
  text-align: center;
}
.red {
  top: 20px;
  left: 20px;
  background: red;
  /* z-index: 1; we no more need this */
  transform: translateZ(1px); /* this will do the trick  */
}
.green {
  top: 60px;
  left: 60px;
  background: green;
}
.blue {
  top: 100px;
  left: 100px;
  background: blue;
}
div:first-child {
  opacity: .99;
}

<div><span class="red"><button onclick="alert('clicked')">Click me</button></span></div>
<div><span class="green">Green</span></div>
<div><span class="blue">Blue</span></div>
<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
    About this SO Question: <a href='http://stackoverflow.com/q/19850037/1366033'>Override CSS Stacking Context</a><br/>
    Adapted From this Article: <a href='http://philipwalton.com/articles/what-no-one-told-you-about-z-index/'>What No One Told You About Z-Index</a><br/>
    </div>

在我的情况下更具体

body {
  padding: 20px;
  transform-style: preserve-3d; /* this is important for the trick to work */
  position: relative;
}
.dropdown {
position: sticky !important;
left: 0;
}

.dropdown-menu {
  transform: translate3d(5px, 43px, 1px) !important; /* overriden Z translation*/
}

.sticky-col-1 {
  background: white;
  position: sticky;
  left: 20px;
}
.sticky-col-2 {
  background: white;
  position: sticky;
  left: 141px;
}
.sticky-col-3 {
  background: white;
  position: sticky;
  left: 183px;
}
.sticky-col-4 {
  background: white;
  position: sticky;
  left: 226px;
}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>
  <body>
  <table>
  <tr>
    <td class="sticky-col-1">
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>
</td>
    <td class="sticky-col-2">Sticky</td><td class="sticky-col-3">Sticky</td><td class="sticky-col-4">Sticky</td>
    <td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td>
  </tr>
  <tr>
    <td class="sticky-col-1">
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>
</td>
    <td class="sticky-col-2">Sticky</td><td class="sticky-col-3">Sticky</td><td class="sticky-col-4">Sticky</td>
    <td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td>
  </tr>
  <tr>
    <td class="sticky-col-1">
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>
</td>
    <td class="sticky-col-2">Sticky</td><td class="sticky-col-3">Sticky</td><td class="sticky-col-4">Sticky</td>
    <td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td><td>not sticky</td>
  </tr>
  </table>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

按钮未被绿色方块覆盖的部分可点击，但绿色方块上方的部分不可点击。

【问题讨论】：

所以我将继续使用 NgbDropdown。它在 DOM 中重新定位菜单，因此它改变了堆叠上下文。

标签： html css position z-index sticky

【解决方案1】：

使用`pointer-events: none;`

如果您将pointer-events: none; 设置为一个元素，它将在任何单击、拖动、悬停或其他指针-事件中被忽略。在您的情况下，应用到您的 green 框将使其停止阻止您在其下方的按钮。请参阅下面的编辑代码 sn-p，我在其中添加了 pointer-events: none;

body {
  transform-style: preserve-3d; /* this is important for the trick to work */
}
.red, .green, .blue {
  position: absolute;
  width: 100px;
  color: white;
  line-height: 100px;
  text-align: center;
}
.red {
  top: 20px;
  left: 20px;
  background: red;
  /* z-index: 1; we no more need this */
  transform: translateZ(1px); /* this will do the trick  */
}
.green {
  top: 60px;
  left: 60px;
  background: green;
  pointer-events: none; /* this will solve your problem */
}
.blue {
  top: 100px;
  left: 100px;
  background: blue;
}
div:first-child {
  opacity: .99;
}

<div><span class="red"><button onclick="alert('clicked')">Click me</button></span></div>
<div><span class="green">Green</span></div>
<div><span class="blue">Blue</span></div>
<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
    About this SO Question: <a href='http://stackoverflow.com/q/19850037/1366033'>Override CSS Stacking Context</a><br/>
    Adapted From this Article: <a href='http://philipwalton.com/articles/what-no-one-told-you-about-z-index/'>What No One Told You About Z-Index</a><br/>
    </div>

【讨论】：

谢谢你，这可能是解决方案。但是我的例子不够有代表性，所有的方块——单元格，里面都有按钮。请在此处查看更具代表性的示例：jsfiddle.net/wad2kLu5

使用pointer-events: none;

使用`pointer-events: none;`