Css 转变：规模和定位

当我应用变换比例时，“z索引已更改”，这是怎么回事？ 我错过了什么？使用transform有什么“技巧”吗

.thumb > a .img-cover{
    -webkit-transition: all 1.2s ease-out;border-radius:5px;
    -webkit-transform: scale(1);
}
.img-cover{
    position:relative;
    overflow:hidden;
}
.img-cover:before{
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    content:"";
    box-shadow: inset 0px 0 100px #f0f;}
.thumb > a:hover img {
    -webkit-transform: scale(1.1);
} ​

HTML

​

---

自己定义

z-index

，这样它就可以为您完成

.img-cover:before{
    position:absolute;
    z-index: 10;
    top:0;left:0;right:0;bottom:0;
    content:"";
    box-shadow: inset 0px 0 100px #f0f;}
.thumb > a:hover img {
    z-index: 0;
    -webkit-transform: scale(1.1);
} 

---

当设置属性

位置：绝对

时，对象不在流中。这就是对齐方式不同的原因，看起来z索引已经改变了。手动设置z-index可以解决此问题。

将z-index交给您的

。img封面：在
a:hover
上的
之前。这样写：

.thumb > a:hover .img-cover:before{
    z-index:2;
}

检查这个
你自己说的，“z指数改变了”。因此，您必须设置
的
z-index
和
的
img-cover:before
的
z-index
。img-cover的
z-index
的值必须低于
的
z-index
。img-cover:before

例如：
您缺少了“堆叠上下文”这一术语，您可以在Philip Walton的文章中了解到这一术语。（将为以下对象创建新的堆叠上下文：具有z索引（非自动）的定位元素、不透明度小于1的元素、变换、过滤器、css区域、分页媒体等。）
.thumb > a:hover .img-cover:before{
    z-index:2;
}