最近要實(shí)現(xiàn)一個(gè)類(lèi)似下面的層疊的效果，需要帶一個(gè)hover?緩動(dòng)效果。

第一反應(yīng)就是直接使用:before&:after偽元素，配合絕對(duì)定位加z-index?輕松實(shí)現(xiàn)，實(shí)際操作發(fā)現(xiàn)并不是這么一回事。

代碼如下

.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;
}

但是得到的確實(shí)下面的效果

也就是:before?跑到上面來(lái)了，檢查.box?也有postion?屬性賦值，當(dāng)時(shí)就有點(diǎn)懵逼了。因?yàn)楹蛯盈B有關(guān)，所以就翻了一些和z-index?相關(guān)的資料，也就是層疊順序，網(wǎng)上相關(guān)資料很多，本文主要說(shuō)說(shuō)偽元素的層疊上下文。

解決方案

.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;
}

父元素不設(shè)置z-index值，偽元素設(shè)置負(fù)z-index?值，父元素位移效果不使用transform，簡(jiǎn)單說(shuō)下原因。

• 同一個(gè)層疊上下文里面, 層疊順序從后向前依次是: 背景和邊框、負(fù)z-index、塊級(jí)盒、浮動(dòng)盒、行內(nèi)盒、z-index:0、正z-index.
• 偽元素相當(dāng)于子元素，也就是包含在元素內(nèi)的，二者不在同一個(gè)層疊上下文中。

如果想實(shí)現(xiàn)層疊效果，需要元素和對(duì)應(yīng)的偽元素在同一層疊上下文中，所以不能讓元素創(chuàng)建層疊上下文。以下情況會(huì)創(chuàng)建層疊上下文

• 即便是?position?不為?static?的元素, 如果沒(méi)有指定一個(gè)非?auto?值的?z-index, 該元素就不會(huì)建立一個(gè)層疊上下文。
• 元素的transform值不是none。

當(dāng)然還有其他情況本文就不列出了，因?yàn)?code>transform?會(huì)創(chuàng)建層疊上下文，所以緩動(dòng)的時(shí)候只能使用top 進(jìn)行變換了。

這里有點(diǎn)的是，top?bottom?等屬性如果沒(méi)有設(shè)置初始值transition是不會(huì)生效的，所以代碼中設(shè)置了初始值top:0。

總結(jié)

以上是生活随笔為你收集整理的CSS 伪元素:before&:after 与z-index 的那点事的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。