CSS z-index is not working with element which parent has transform:translate3d

Question

Environment

Browser: Chrome Version 69.0.3497.92 (Official Build) (64-bit)

Components: ganlanyuan/tiny-slider found here

Background:

I have a slider created using tiny-slider. It works well. Also on the same page, I have an overlay div which overlays the whole page.

The Issue:

The exact problem is, On my slider I have an element (I am calling it the active element) which should be seen over the 'overlay' layer. Which means all other slider item should be under the overlay except the active element.

I am giving the overlay z-index: 999 and active item z-index: 9999 . Technically we expect that the active comes in front of the overlay. But it doesn't.

What I Expect to get:

What I actually get:

I am aware of that this issue is because the slider uses transform:translate3d to move the items left and right which is canceling the z-index .

I have read most solutions that I found on google but no luck.

I regenerated this problem on codepen. here is the link https://codepen.io/peshraw-h-ahmed/pen/pOZNdg . Is there any solution for that problem? Can anyone tell me where the problem is and fix it inside the codepen snippet.

The Codes:

 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

You can change the overlay so it belong to the stacking context generated by the transform and you will be able to make the active element above it:

 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>