剪辑路径不适用于 z-index答案

【问题标题】：Clip-path not working with z-index剪辑路径不适用于 z-index
【发布时间】：2017-07-07 23:20:26
【问题描述】：

我在将容器放在另一个使用剪切路径的容器上时遇到问题。我曾尝试在任何一个容器上使用 z-index ，但它似乎没有帮助。

如果我从容器中删除 clipped-path 类，那么块会愉快地滑过容器。我已包含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>

【问题讨论】：

相关stackoverflow.com/questions/10477859/…

标签： css z-index clip-path

【解决方案1】：

要影响元素的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 */
}

【讨论】：

这可能是正确的答案，但我不确定它是否完全解释了这个问题。为什么剪辑路径会以这种方式影响原始帖子？它如何改变或与 z-index 交互？
IIRC，clip-path 不是问题。实际问题是 OP 希望一个元素堆叠在另一个元素之上，而不是使用 z-index 来这样做。