这段代码可以正常使用，并且边框在徽标图像的顶部旋转，但是如果我将边框的z-index更改为9988，将图像的z-index更改为9999，该代码将无法正常工作。我想念什么？我希望边框在图像后面旋转
谢谢
#logo-position {width: 170px; height: 170px; position: absolute; }
#mylogo { width: 170px; height: 170px; position: absolute;}
#mylogo img {position: absolute;}
.logoborder {z-index:9999;}
.logotext {z-index:9988;}
.logoborder:hover { -moz-animation: rotate 2s linear infinite;
-webkit-animation: rotate 2s linear infinite;
-o-animation: rotate 2s linear infinite;
-ms-animation: rotate 2s linear infinite;
}
@-moz-keyframes rotate {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(360deg);}
}
@-webkit-keyframes rotate {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
@-ms-keyframes rotate {
from {-ms-transform: rotate(0deg);}
to {-ms-transform: rotate(360deg);}
}
@-o-keyframes rotate {
from { -o-transform: rotate(0deg);}
to {-o-transform: rotate(360deg);}
}<body>
<div id="logo-position">
<div id="mylogo">
<a href="http://www.makepassive.com">
<img class="logoborder" src="http://i.stack.imgur.com/RhC7Z.png" alt="logo_170x170_300px-border" width="170" height="170"/>
<img class="logotext" src="http://i.stack.imgur.com/PiyVY.png" alt="logo_170x170_300px-text" width="170" height="170"/>
</a>
</div>
</div>
</body>最佳答案
问题是，当您将z-index的.logotext更改为9999，并将.logoborder更改为9988时，基本上是在图像后面隐藏了边框元素。虽然您的图片是具有透明背景的PNG文件，但是它将堆叠在.logoborder的前面。结果，您将永远无法通过鼠标指针找到它。我创建了代码的CODEPEN示例，并在border: 5px solid black;中添加了.logotext以显示问题。
要解决此问题，需要将.logotext放在.logoborder之前，如下所示：
<img class="logotext" src="http://i.stack.imgur.com/PiyVY.png" alt="logo_170x170_300px-text" width="170" height="170"/>
<img class="logoborder" src="http://i.stack.imgur.com/RhC7Z.png" alt="logo_170x170_300px-border" width="170" height="170"/>
然后，您像这样更改CSS代码：
.logotext:hover + .logoborder{ -moz-animation: rotate 2s linear infinite;
-webkit-animation: rotate 2s linear infinite;
-o-animation: rotate 2s linear infinite;
-ms-animation: rotate 2s linear infinite;
}
然后它将按您的意愿工作。
关于html - 使用-webkit-rotate时Z索引不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35255807/