Override CSS Stacking Context on sticky elements

Question

I got a column in the table where cells - TD elements have position: sticky (for horizontal scrolling). Cells contain bootstrap dropdown menu with buttons. As each TD element creates its own stacking context (position: sticky), dropdown menu opens under those elements. The solution from https://stackoverflow.com/a/63838447/11874413 works partially, as the menu is visible now, but buttons inside it are not clickable.

So my question is: is there a way to make them clickable?

modified example from original question:

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>

Here is more specific in my case

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>

part of the button that would not be covered by the green square is clickable, but the part that is over the green square is not clickable.

So I am going forward with NgbDropdown. It repositions menu in DOM, so it changes stacking context. — G_Samociak, Aug 12 '21 at 17:44

score 0 · Answer 1 · answered Aug 07 '21 at 03:33

Use `pointer-events: none;`

If you set pointer-events: none; to an element, it will be ignored in any click, drag, hover, or otherwise pointer-events. In your case, applying to your green box will make it stop blocking your button under it. See the edited code snippet below, where I've added 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>

Thanks for that, it might be the solution. But my example wasnt representative enough, all the squares - cells, have buttons inside. Please take a look at more represantative example here: https://jsfiddle.net/wad2kLu5/ — G_Samociak, Aug 09 '21 at 12:24

Override CSS Stacking Context on sticky elements

1 Answers1

Use pointer-events: none;

Use `pointer-events: none;`