Bre*_*ide 6 css z-index clip-path
我在将一个容器放置在另一个使用剪切路径的容器顶部时遇到问题。我尝试在任一容器上使用 z-index 但似乎没有帮助。
如果我从容器中删除剪切路径类，则块会在容器上愉快地滑动。我已经包含了我的问题的一个小提琴。
这是我的代码：
window.onscroll = function(){
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
var para = Math.round(scrollTop / 1.2);
document.querySelector('#block').style.transform = "translate3d(0px," + para + "px,0px)";
}body {margin: 5px;}
#main {height:100vh;}
#below-main {height:100vh;}
#row1 {height:100vh;}
/* Paralellogram to slide underneath block
--------------------------------------------- */
#bluestripe {
height: 60vh;
width:60vw;
margin: 0 auto;
}
img {width: 100%;}
.clip-polygon {clip-path: polygon(100% 0, 100% 40%, 0 100%, 0 60%);}
/* Block to sit above parallelogram
--------------------------------------------- */
#block {
height: 50px;
width:100px;
margin: 50px auto 0 auto;
transform: translate3d(0px,0px,0px);
background-color: #999;
}<body>
<div id="main">
<div id="block">This needs to slide on top</div>
<div id="bluestripe">
<img id="sea" src="https://images.pexels.com/photos/6644/sea-water-ocean-waves.jpg?w=940&h=650&auto=compress&cs=tinysrgb" alt="" class="clip-polygon">
</div>
<div id="row1"></div>
</div>
</body>要影响元素的z-index，它必须设置为除（默认值）position之外的其他值。static
对于您的#block，它没有position设置，因此它使用源中元素顺序所隐含的层：它出现在源中剪切元素之前，并自然地位于其下方。
z-index要将其放置在堆栈中的较高位置，请为其指定 aposition和 a z-index：
#block {
height: 50px;
width: 100px;
margin: 50px auto 0 auto;
transform: translate3d(0px,95px,0px);
background-color: #999;
position: relative; /* Allows z-index to take affect */
z-index: 2; /* Stacks it above the clipped layer, which has no position nor z-index and is at z-index 1 */
}