剪辑路径不能与z-index一起使用

我无法将容器放在使用剪辑路径的另一个容器的顶部。我曾尝试在任一容器上使用z-index，但似乎没有帮助。剪辑路径不能与z-index一起使用

如果我从容器中删除剪辑路径类，那么该块愉快地滑过容器。我已经包括a fiddle of my problem.

这里是我的代码：

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>

来源

2017-07-07 Breageside

相关https://stackoverflow.com/questions/10477859/why-isnt-z-index-在这里工作 – TylerH

要影响一个元素的z-index，它必须有position设置为static（默认值）以外的东西。

对于您的#block，它没有设置position，所以它使用源中元素顺序隐含的图层：它在裁剪元素之前出现在源中，并自然落在它下面。

要在堆栈中的位置上它更高z-index，给它一个position和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 */ 
}

来源

2017-07-07 15:17:53 ajm

这可能是正确的答案，但我不确定它是否完全解释了这个问题。为什么剪辑路径影响原始文章的方式？它如何改变或与z-index相互作用？ –

IIRC，它不是'剪辑路径'的问题。实际的问题是，OP希望一个元素堆叠在另一个元素上，而不是使用'z-index'来实现。 – ajm

剪辑路径不能与z-index一起使用

回答

相关问题