环境
组件:甘蓝源/小滑块
here
背景:
我有一个用小滑块创建的滑块。效果很好。同样在同一页上,我有一个覆盖整个页面的覆盖div。
确切的问题是,在我的滑块上有一个元素(我称之为active元素),应该在“overlay”层上看到。这意味着除活动元素外,所有其他滑块项都应位于覆盖之下。
z-index: 999
和活动项
z-index: 9999
.
从技术上讲,我们希望主动的是在前面的覆盖。但事实并非如此。
我得到的是:
我知道这个问题是因为滑块使用
transform:translate3d
z-index
.
我在codepen上重新生成了这个问题。这是链接
https://codepen.io/peshraw-h-ahmed/pen/pOZNdg
.
代码:
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>
