Html Chrome bug，变换：旋转和背景附件修复

我不明白为什么轮换会影响固定移位图像。在IE、FF、Opera上，一切都很好。演示：。请帮忙

html:

---

不知道为什么chrome会有这样的行为，但似乎使用了

z-index

解决了这个问题，我搜索了类似的bug，但似乎没有人报告相同的行为，所以可能是一个bug

.hover {
    z-index:1;
    /* Other properties */
}

---

事实上，

background attachment

属性与其他元素没有任何关系，而且，您的元素位于

absolute

位置，因此它已经不在流中，因为非其他浏览器的行为也是如此，我们可以将其视为一个bug。

这也可以通过从

.img

中删除

位置：relative

来解决（基于OPs示例，我看不出选择器具有此属性的原因）：

例如：

正如Alien先生提到的，这可能是Chrome的一个bug，以及你当前的CSS

---

如果在同一级别上使用多个元素的

position:relative | absolute

，我建议您设置自己的

z-index

。如果未设置此选项，则会应用

z-index:auto

。不要让机器接管你的CSS。

添加

z-index:-1到文本似乎解决了问题。嗯，我很接近。对于同样的事情，我只是把它放在图片后面。谢谢你的演示。我使用的代码是这样的：这里再次看到问题，这是唯一的chrome可以更好地重新设计html和css吗？@user2978570您的文本甚至不可见，您可以共享一个您试图实现的模型，我可以帮助您更好地解决问题CSS@Mr.外星人，我已经更新了演示。如果您将鼠标悬停在元素上。将鼠标悬停在.img内，跳转图片。@user2978570我已经看到了，但是设计看起来不太好，我希望您创建一个模型，以便我可以为您提供一些很好的解决方案，所以请在问题中用线框解释您试图做的事情感谢您的演示。我使用了这样的代码：是否可以更好地重新设计html和css？
.img {
    position: absolute;
    margin-top: 20px;
    height: 200px;
    width: 50%;
    background: url("http://goo.gl/jY7Kwv");
    background-size: cover;
    background-attachment: fixed;
}
.img2 {
    background: url('http://hq-wallpapers.ru/wallpapers/2/hq-wallpapers_ru_girls_9386_1920x1080.jpg');
    background-size: cover;
    background-attachment: fixed;

}
.img:hover {
    width: 80%;
    z-index: 2;
}
.hover {
    position: absolute;
    top: 0;
    left: 0;
    z-index:1;
    transition: 0.5s;
}
.hover:hover {
    transform: translateY(10px) rotate(90deg);
}

.hover {
    z-index:1;
    /* Other properties */
}

.img {
    margin-top: 20px;
    height: 200px;
    width: 100%;
    background: url("http://goo.gl/jY7Kwv");
    background-size: cover;
    background-attachment: fixed;
}