CSS z-index不适用于父级已转换的元素：translate3d

Question

环境

浏览器：Chrome版本69.0.3497.92（正式版本）（64位）

组件：发现了ganlanyuan / tiny-slider here

背景：

我有一个使用tiny-slider创建的滑块。它运作良好。同样在同一页面上，我有一个覆盖div，它覆盖了整个页面。

问题：

确切的问题是，在我的滑块上有一个元素（我称其为活动元素），应该在“覆盖”层上看到。这意味着除活动元素外，所有其他滑块项目都应位于叠加层之下。

我正在提供叠加层z-index: 999和活动项目z-index: 9999。 从技术上讲，我们希望活动对象位于叠加层的前面。但事实并非如此。

我期望得到什么：

我实际上得到的是：

我知道这个问题是因为滑块使用transform:translate3d左右移动项目，从而取消了z-index。

我已经阅读了大多数在google上找到的解决方案，但是没有运气。

我在Codepen上重新生成了此问题。这是链接https://codepen.io/peshraw-h-ahmed/pen/pOZNdg。 有什么解决办法吗？谁能告诉我问题出在哪里并将其修复在codepen代码段内。

代码：

tns({
  "container": ".base",
  "items": 4,
  autoplay: false,
  "nav": false,
  "slideBy": "page",
  "mouseDrag": true,
  "swipeAngle": false,
  "speed": 400
})

.overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 999;
}

.item {
  background: #e67e22;
  height: 450px;
  color: #fff;
  border: 1px solid;
}
.item.active {
  z-index: 9999;
  background: #2c3e50;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.8.6/tiny-slider.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.8.6/min/tiny-slider.js"></script>

<div class="base">
  <div class="item">Item</div>
  <div class="item active">Active Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>

<div class="overlay">
   Overlay
</div>

Answer 1

您可以更改叠加层，使其属于转换生成的堆叠上下文，并且可以在其上方创建活动元素：

tns({
  "container": ".base",
  "items": 4,
  autoplay: false,
  "nav": false,
  "slideBy": "page",
  "mouseDrag": true,
  "swipeAngle": false,
  "speed": 400
})

/*the Overlay*/
.base:before {
  content:"";
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 999;
}
/**/
.item {
  background: #e67e22;
  height: 450px;
  color: #fff;
  border: 1px solid;
  position:relative;
}
.item.active {
  z-index: 9999;
  background: #2c3e50;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.8.6/tiny-slider.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.8.6/min/tiny-slider.js"></script>

<div class="base">
  <div class="item">Item</div>
  <div class="item active">Active Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>