Question

我有一个使用绝对定位元素的下拉菜单栏。在悬停时，元素使用CSS3过渡淡入淡出。请注意，我们正在使用Zurb基金会4的大量修改版本。

.has-dropdown {
    .dropdown {
        z-index: 90;
        opacity: 0;
        transition: opacity .25s ease-in-out;
        -webkit-transition: opacity .25s ease-in-out;
    }
    &.hover .dropdown {
        opacity: 1;
    }
}

我们有一个OpenSeadragon图片的实例，在一个页面上使用html5 <canvas>选项，在另一个页面上使用YouTube <embed>。 YouTube嵌入版上有wmode="Opaque"和&wmode=transparent代码，强制他们按照here概述尊重z-index。 embed和canvas及其父元素都设置为z-index: 2; position: relative;

我们遇到的问题是.dropdown元素在转换完成后会落后于<canvas>和<embed>。这似乎主要发生在Chrome上。只要我们将鼠标悬停在任何菜单项上，菜单就会弹回到前面。

我们如何解决这个问题？

Answer 1

删除转换修复了问题。菜单在画布和嵌入物的正前方弹出，然后停留在那里。

但这并没有解决css转换的问题。为了解决这个问题，我将webkit-transform: translate3d(0px, 0px, 0px);应用于.dropdown：

.has-dropdown {
    .dropdown {
        -webkit-transform: translate3d(0px, 0px, 0px);
        opacity: 0;
        transition: opacity .25s ease-in-out;
        -webkit-transition: opacity .25s ease-in-out;
    }
    &.hover .dropdown {
        opacity: 1;
    }
}

现在我有一个转换显示在嵌入和画布的顶部。快乐的日子！

Answer 2

只需将z-index添加到更高的数字，例如：

z-index: 1111;

如果需要，请添加：

pointer-events: none;

绝对定位元素上的CSS3过渡在Canvas，Embed下消失

2 个答案: