剪輯路徑不能與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一起使用

回答

相關問題