Question

当我应用变换比例时，“z-index被更改”是怎么回事？我错过了什么？玩转换有什么“技巧”吗？

.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

<div class="container">
    <article class="thumb">
       <a href="#">
          <div class="img-cover"><img src="http://placekitten.com/300/120"/></div>
          <span>thumb-desc</span>
       </a>
    </article>
</div>

live demo

Answer 1

自己定义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);
}

<强> Example Code

Answer 2

设置属性position: absolute时，对象不在流程中。这就是为什么对齐不同并且看起来z-index已经改变的原因。手动设置z-index可以解决这个问题。

Answer 3

将 z-index 提供给.img-cover:before上的a:hover。写得像这样：

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

选中此http://jsfiddle.net/8uhNK/12/

Answer 4

你自己说，“z-index已经改变”。因此，您必须设置z-index和.img-cover的{{1}}。.img-cover:before z-index的值必须低于.img-cover的{{1}} z-index。

例如： http://jsfiddle.net/skeurentjes/8uhNK/10/

变换：规模和定位

4 个答案: