Css 父div的滚动条与子div重叠

这个问题是特定于Chrome的

我有一个带有

位置：fixed

的容器div，其中有一个带有

位置：fixed的弹出div

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

请帮我把滚动条从弹出窗口除掉

编辑：
添加代码以解释问题：


html，正文{
身高：100%；
}
身体{
保证金：0；
}
#内容{
位置：固定；
顶部：5px；
左：0；
右：0；
底部：5px；
宽度：300px；
溢出y：滚动；
}
#信息{
溢出：自动；
}
#留言，留言{
高度：79px；
背景：#999；
边框底部：1px实心#000；
}
.弹出窗口{
位置：固定；
宽度：250px；
高度：200px；
背景色：红色；
顶部：50px；
左：200px
}
.popup.videoTag{
宽度：100%；
身高：100%；
}

例子
例子
您的浏览器不支持HTML5视频。
例子
例子
例子
例子
将您的
弹出窗口
标记粘贴到
#内容
分区之外。检查下面的代码段：


html，正文{
身高：100%；
}
身体{
保证金：0；
}
#内容{
位置：固定；
顶部：5px；
左：0；
右：0；
底部：5px；
宽度：300px；
溢出y：滚动；
}
#信息{
溢出：自动；
}
#留言，留言{
高度：79px；
背景：#999；
边框底部：1px实心#000；
}
.弹出窗口{
位置：固定；
宽度：250px；
高度：200px；
背景色：红色；
顶部：50px；
左：200px；
z指数：99；
}
.popup.videoTag{
宽度：100%；
身高：100%；
}

例子
例子
例子
例子
例子
例子
您的浏览器不支持HTML5视频。
如果问题只存在重叠，您可以通过
z-index:999
解决。将此css属性指定给弹出窗口，如下所示：

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

这与
overflow-y:scroll有关和
#内容的位置以及它们如何协同工作。
只需删除
位置：固定#content
上选择code>。它从它的容器中获得它的位置，然后应该修复这个问题

次要但
左侧：200px缺少分号-此处可能不起作用，但请将其收紧


html，正文{
身高：100%；
}
身体{
保证金：0；
}
#内容{
/*位置：固定*/
顶部：5px；
左：0；
右：0；
底部：5px；
宽度：300px；
溢出y：滚动；
}
#信息{
溢出：自动；
}
#留言，留言{
高度：79px；
背景：#999；
边框底部：1px实心#000；
}
.弹出窗口{
位置：固定；
宽度：250px；
高度：200px；
背景色：红色；
顶部：50px；
左：200px；
}
.popup.videoTag{
宽度：100%；
身高：100%；
}

例子
例子
您的浏览器不支持HTML5视频。
例子
例子
例子
例子
如果你对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>

jQuery

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

JSFiddle（也在使用Chrome；）

请分享您的代码……如果我们能看到您的HTML标记和CSS以及任何相关的JavaScript，那将非常有用。否则，我们只能猜测，这对你没有用。（请参阅随机猜测答案…@markschultheis添加了代码片段，记住问题只在Chrome上出现。您是否尝试添加
！重要信息
？像这样：
z-index:999！重要的。它解决了问题吗？它也没有帮助。@剪贴代码，这意味着问题在其他地方，请共享您的html和css，我们不能盲目回答您的问题，我们尝试过，但我们无法编辑代码片段，问题仅在chrome上观察到。您是否尝试过使用“@商业自杀”来解决问题！“重要”。否则，在codepen或JSFIDLE中共享您的代码添加了代码片段，问题是在chrome onlySee上观察到的@Marks answer上我的评论。我在弹出窗口上有附加功能，因此无法将其移出当前层次结构。侧栏上添加了
位置：fixed
，以避免在滚动页面右侧时滚动。因此，我担心我无法删除它的固定位置。它在其他浏览器上是如何工作的，甚至在Chrome上，当它里面没有
视频
标签时，它也可以工作。不知道，我没有写那个浏览器。我只是觉得这可以解决问题。：），对不起，如果我听起来很粗鲁。我只是好奇：）谢谢，我不这么认为，我的皮肤很厚，这与规范的解释以及在特定CSS（overflow-x和overflow-y和scroll）上的措辞有关。您可以阅读规范中的详细信息，因为它有注释。
$(function(){
  $(".message").on("click",function(e){
    e.preventDefault();
    var url = $(this).data("url");
    $("video source").attr("src",url);
    $("video")[0].load();
  })
})