CSS 伪元素:before&:after 与z-index 的那点事

最近要实现一个类似下面的层叠的效果，需要带一个hover 缓动效果。

第一反应就是直接使用:before&:after伪元素，配合绝对定位加z-index 轻松实现，实际操作发现并不是这么一回事。

代码如下

.box{
    width:100px;
    height:100px;
    position:relative;
    z-index:2;
    box-shadow:0 3px 5px #eee;
    background-color:#fff;
}

.box:before{
    content:"";
    position:absolute;
    top:5px;
    left:5px;
    right:5px;
    bottom:-5px;
    box-shadow:0 3px 5px #eee;
    background-color:#fff;
    z-index:1;
}

但是得到的确实下面的效果

也就是:before 跑到上面来了，检查.box 也有postion 属性赋值，当时就有点懵逼了。因为和层叠有关，所以就翻了一些和z-index 相关的资料，也就是层叠顺序，网上相关资料很多，本文主要说说伪元素的层叠上下文。

解决方案

.box{
    width:100px;
    height:100px;
    position:relative;
    top:0;
    box-shadow:0 3px 5px #eee;
    background-color:#fff;
    transiton:.5s;
}

.box:before{
    content:"";
    position:absolute;
    top:5px;
    left:5px;
    right:5px;
    bottom:-5px;
    box-shadow:0 3px 5px #eee;
    background-color:#fff;
    z-index:-1;
}

.box:hover{
    top:-5px;
}

父元素不设置z-index值，伪元素设置负z-index 值，父元素位移效果不使用transform，简单说下原因。