在HTML5视频上呈现下拉菜单时出现问题

Question

我有一个下拉菜单，显示在页面顶部，就在HTML5视频上方。到目前为止，我已经注意到Chrome和Safari，这有时会导致下拉菜单出现一些奇怪的结果。

向上和向下滚动似乎会触发，然后单击菜单。视频使用HTML5标签嵌入，菜单使用Bootstrap 3的下拉支持构建。

有谁知道可能导致这种情况的原因？

Answer 1

问题与为视频容器使用负z-index有关。

因为我希望视频出现在背景中，所以我给了它一个负的z-index。出于某种原因，当视频元素具有负z-index时，上面的下拉菜单会出现渲染问题，如问题屏幕截图所示。将视频移动到具有正z-index（尽管是比其他页面元素更低的z-index，因此它仍然出现在后台）似乎已经解决了这个问题。