如何在Z-重叠

Question

当我有滚动 一个问题，我有一个DIV与固定

下DIV包含在所述滚动功能的位置的元件自动填充z索引90，上部格滚动的div指数100包含悬停

元素通过滚动罗威div的一次，我徘徊另一个滚动拦住......

我有一个简单的方式来显示的问题。我想继续即使我在上顶部的红色之一格伦DIV滚动...

overflow:scroll; 

sample code

Answer 1

你的红格简单地声明pointer-events: none;。
这将解决捕获鼠标事件的问题，但另一方面它会阻止您完全与元素进行交互。

.parent { 
 
    width: 400px; 
 
    height: 200px; 
 
    background-color:green; 
 
    border: 1px solid black; 
 
    overflow:scroll; 
 
    z-index: 100; 
 
    display: block; 
 
    cursor: pointer; 
 
} 
 

 
.child1 { 
 

 
    /* this prevents mouse events being captured by this element*/ 
 
    pointer-events:none; 
 
    
 
    position:absolute; 
 
    z-index: 110; 
 
    background-color: red; 
 
    top:50px; 
 
    height:40px; 
 
    width:120px; 
 
}

<div class="parent"> 
 
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis 
 
</div> 
 
<div class="child1"> 
 
hello world filler 
 
</div>