Question

此问题是Chrome特定的。

我有一个带position: fixed的容器div，里面有一个带position: fixed

的弹出式div

仅在Chrome上，容器div的滚动条与我的弹出式div重叠。（见附图）

请帮我从popup div中删除滚动条。

修改添加代码来解释问题：

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

Answer 1

将popup标记粘贴到#content 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;
  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>

Answer 2

如果问题只是重叠，您可以通过z-index: 999进行修复。将此css属性赋予弹出窗口，如下所示：

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

Answer 3

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

轻微，但弹出窗口上的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>

Answer 4

如果你对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/

父div的滚动条与子div重叠

4 个答案: