父div的滚动条覆盖子div

我有一个div容器与position: fixed和里面我有position: fixed

只有在Chrome浏览器中弹出DIV，容器div的滚动条重叠我弹出股利。（见附图）

请帮我摆脱弹出div的滚动条。

编辑： 添加代码来说明问题：

html, body { 
 
    height: 100%; 
 
} 
 
body { 
 
    margin:0; 
 
} 
 
#content { 
 
    position: fixed; 
 
    top: 5px; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 5px; 
 
    width:300px; 
 
    overflow-y: scroll; 
 
} 
 
#messages { 
 
    overflow: auto; 
 
} 
 
#messages .message { 
 
    height: 79px; 
 
    background: #999; 
 
    border-bottom: 1px solid #000; 
 
} 
 
.popup { 
 
    position: fixed; 
 
    width:250px; 
 
    height:200px; 
 
    background-color:red; 
 
    top: 50px; 
 
    left: 200px 
 
} 
 
.popup .videoTag { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div id="container"> 
 
    
 
    <div id="content"> 
 
     <div id="messages"> 
 
      <div class="message">example</div> 
 
      <div class="message">example</div> 
 
      
 
      <div class="popup"> 
 
      <video class="videoTag" controls> 
 
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
 
      Your browser does not support HTML5 video. 
 
      </video> 
 
      </div> 
 
      <div class="message">example</div> 
 
      <div class="message">example</div> 
 
      <div class="message">example</div> 
 
      <div class="message">example</div> 
 
      
 
     </div> 
 
     
 
    </div> 
 
</div>

来源

2017-05-25 ScrapCode

请分享您的代码... –

如果我们可以看到您的HTML标记和您的CSS以及任何相关的JavaScript，将会非常有用。否则，我们不能做任何事情，只能猜测，这对你没有用处。（请参阅随机猜测答案...） –

@MarkSchultheiss添加了代码段，记住问题只在Chrome上。 – ScrapCode

的#content股利外贴上您的popup标记。检查下面的代码片段：

html, body { 
 
    height: 100%; 
 
} 
 
body { 
 
    margin:0; 
 
} 
 
#content { 
 
    position: fixed; 
 
    top: 5px; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 5px; 
 
    width:300px; 
 
    overflow-y: scroll; 
 
} 
 
#messages { 
 
    overflow: auto; 
 
} 
 
#messages .message { 
 
    height: 79px; 
 
    background: #999; 
 
    border-bottom: 1px solid #000; 
 
} 
 

 
.popup { 
 
    position: fixed; 
 
    width:250px; 
 
    height:200px; 
 
    background-color:red; 
 
    top: 50px; 
 
    left: 200px; 
 
    z-index:99; 
 
} 
 
.popup .videoTag { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div id="container"> 
 
    
 
    <div id="content"> 
 
     <div id="messages"> 
 
      <div class="message">example</div> 
 
      <div class="message">example</div> 
 
      <div class="message">example</div> 
 
      <div class="message">example</div> 
 
      <div class="message">example</div> 
 
      <div class="message">example</div> 
 
      
 
     </div> 
 
     
 
    </div> 
 
    
 
      
 
      <div class="popup"> 
 
      <video class="videoTag" controls> 
 
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
 
      Your browser does not support HTML5 video. 
 
      </video> 
 
      </div> 
 
</div>

来源

2017-05-25 11:53:59 Bhuwan

它不起作用！ – ScrapCode

你有没有试过@ @商业自杀使用'！重要'提到。否则在codepen或jsfiddle中分享您的代码 – Bhuwan

添加代码段，仅在铬上观察到问题 – ScrapCode

如果只在重叠的问题，您可以通过z-index: 999修复它。给这个CSS属性您的弹出这样的：

.popup { 
    z-index: 999; // or more 
}

来源

2017-05-25 11:54:43

它不起作用！ – ScrapCode

您是否尝试添加'！important'？像这样：'z-index：999！important;'。它解决了问题吗？ –

它也没有帮助。 – ScrapCode

这同overflow-y:scroll;和#content的位置，以及它们如何协同工作要做。只需删除#content上的postion:fixed;即可。它从它的容器中获得它的位置，然后应该解决问题。

次要但弹出的left: 200px;缺少分号 - 可能不会在这里播放，但收紧它。

html, body { 
 
    height: 100%; 
 
} 
 
body { 
 
    margin:0; 
 
} 
 
#content { 
 
    /* position: fixed;*/ 
 
    top: 5px; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 5px; 
 
    width:300px; 
 
    overflow-y: scroll; 
 
} 
 
#messages { 
 
    overflow: auto; 
 
} 
 
#messages .message { 
 
    height: 79px; 
 
    background: #999; 
 
    border-bottom: 1px solid #000; 
 
} 
 
.popup { 
 
    position: fixed; 
 
    width:250px; 
 
    height:200px; 
 
    background-color:red; 
 
    top: 50px; 
 
    left: 200px; 
 
} 
 
.popup .videoTag { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div id="container"> 
 
    
 
    <div id="content"> 
 
     <div id="messages"> 
 
      <div class="message">example</div> 
 
      <div class="message">example</div> 
 
      
 
      <div class="popup"> 
 
      <video class="videoTag" controls> 
 
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
 
      Your browser does not support HTML5 video. 
 
      </video> 
 
      </div> 
 
      <div class="message">example</div> 
 
      <div class="message">example</div> 
 
      <div class="message">example</div> 
 
      <div class="message">example</div> 
 
      
 
     </div> 
 
     
 
    </div> 
 
</div>

来源

2017-05-25 16:16:16

添加侧栏上的'position：fixed'是为了避免页面右侧滚动时滚动。因此我担心我无法从中删除固定位置。 – ScrapCode

它是如何在其他浏览器上工作的，它甚至可以在Chrome中使用，当我们没有'video'标签时。 – ScrapCode

不知道，我没有写这个浏览器。我只是看到这可以修复它。 –

好吧，如果你很酷的jQuery你可以做这样的事情。

HTML

<div id="container"> 

<div id="content"> 
    <div id="messages"> 
     <div class="message" data-url="https://www.w3schools.com/html/mov_bbb.mp4">example 1 </div> 
     <div class="message" data-url="http://techslides.com/demos/sample-videos/small.mp4">example 2 </div> 
     <div class="message" data-url="https://www.w3schools.com/html/mov_bbb.mp4">example 3</div> 
     <div class="message" data-url="http://techslides.com/demos/sample-videos/small.mp4">example 4</div> 
     <div class="message" data-url="https://www.w3schools.com/html/mov_bbb.mp4">example 5</div> 
     <div class="message" data-url="http://techslides.com/demos/sample-videos/small.mp4">example 6</div> 

    </div> 

</div> 

<div class="popup"> 
    <video class="videoTag" controls> 
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
    Your browser does not support HTML5 video. 
    </video> 
</div>

CSS

html, body { 
    height: 100%; 
} 
body { 
    margin:0; 
} 
#content { 
    position: fixed; 
    top: 5px; 
    left: 0; 
    right: 0; 
    bottom: 5px; 
    width:300px; 
    overflow-y: scroll; 
} 
#messages { 
    overflow: auto; 
} 
#messages .message { 
    height: 79px; 
    background: #999; 
    border-bottom: 1px solid #000; 
} 
.popup { 
    position: fixed; 
    width:250px; 
    height:200px; 
    background-color:red; 
    top: 50px; 
    left: 200px; 
    z-index:99; 
} 
.popup .videoTag { 
    width: 100%; 
    height: 100%; 
}

jQuery的

$(function(){ 
    $(".message").on("click",function(e){ 
    e.preventDefault(); 
    var url = $(this).data("url"); 
    $("video source").attr("src",url); 
    $("video")[0].load(); 
    }) 
})

的jsfiddle（在Chrome工作太;））

https://jsfiddle.net/7bkxez1f/

来源

2017-05-25 19:20:40 Warface

父div的滚动条覆盖子div

回答

相关问题