Question

我正在尝试创建一个我可以悬停的盒子，另外我需要在悬停的hitbox后面旋转图像。但似乎在谷歌浏览器中，特别是图像的一部分位于hitbox前面而另一部分落后于尽管hitbox为z-index:2而图像为z-index: 1。

CSS：

.hitbox {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 2;
    background-color: rgba(255,50,0,0.3);
}
img.img-ele {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    -webkit-transform: rotateX(15deg) rotateY(12deg);
    -moz-transform: rotateX(15deg) rotateY(12deg);
    -ms-transform: rotateX(15deg) rotateY(12deg);
    -o-transform: rotateX(15deg) rotateY(12deg);
    transform: rotateX(15deg) rotateY(12deg);
}

HTML：

<div class="container">
    <div class="box">
        <div class="hitbox"></div>
        <img src="http://placehold.it/111x89/000" class="img-ele" />
    </div>
</div>
<div class="inside-container">Inside container</div>
<div class="inside-hitbox">Inside hitbox</div>

我应该尝试使用变通方法或不同的html标记吗？

应用了较低z索引和轮换的元素会忽略Google Chrome中较高的索引

0 个答案: