z-index在:: after/:: before元素之后不起作用？

z-index不适用于其::before/::after元素。我在这里分享下面的代码。z-index在:: after/:: before元素之后不起作用？

.or { 
 
    border: 2px solid #8fc300; 
 
    border-radius: 5px; 
 
    color: #333; 
 
    font-size: 17px; 
 
    font-weight: 600; 
 
    height: 34px; 
 
    line-height: 26px; 
 
    text-align: center; 
 
    width: 34px; 
 
    margin-top: 64px; 
 
    margin-left: 20px; 
 
    margin-right: 20px; 
 
    background: #fff; 
 
    /*For z-index - keep the green area on top*/ 
 
    position: relative; 
 
    z-index: 11; 
 
} 
 
.or::after { 
 
    background: red; 
 
    content: ""; 
 
    display: block; 
 
    height: 116px; 
 
    margin-left: 15px; 
 
    margin-top: -68px; 
 
    width: 4px; 
 
    /*For z-index - keep the green area on top*/ 
 
    position: relative; 
 
    z-index: 9; 
 
}

<div class="or"></div>

来源

2016-09-14 Jim Fahad

您可以删除z-index从父元素和伪元素上使用负z-index: -1。如果你想在红线只有绿线则需要从母体取出白色背景也DEMO

.or { 
 
    border: 2px solid #8fc300; 
 
    border-radius: 5px; 
 
    color: #333; 
 
    font-size: 17px; 
 
    font-weight: 600; 
 
    height: 34px; 
 
    line-height: 26px; 
 
    text-align: center; 
 
    width: 34px; 
 
    margin-top: 64px; 
 
    margin-left: 20px; 
 
    margin-right: 20px; 
 
    background: #fff; 
 
    /*For z-index - keep the green area on top*/ 
 
    position: relative; 
 
} 
 
.or::after { 
 
    background: red; 
 
    content: ""; 
 
    display: block; 
 
    height: 116px; 
 
    margin-left: 15px; 
 
    margin-top: -68px; 
 
    width: 4px; 
 
    /*For z-index - keep the green area on top*/ 
 
    position: absolute; 
 
    z-index: -1; 
 
}

<div class="or"></div>

来源

2016-09-14 12:00:16

这里在我的场景中，'.or'住在一个'modal'中，所以它必须有一个'z-index'值，否则如果我为'or :: after'设置'z-index：-1'，它在模态之下。有没有解决方案保留'z-index'与父'.or'？ –

你可以为你创建演示程序吗？如果没有它，很难告诉解决方案。 –

请看这里。 http://jimfahad.com/onewave/3/game-play.html（点击“创建帐户”按钮 - http://prntscr.com/chyqap） –

，如果你想要的东西，这样的尝试。我并改变了造型为.or类等background-color: transparent除去位置，z索引和用于.or::afterz-index: -11

.or { 
 
    border: 2px solid #8fc300; 
 
    border-radius: 5px; 
 
    color: #333; 
 
    font-size: 17px; 
 
    font-weight: 600; 
 
    height: 34px; 
 
    line-height: 26px; 
 
    text-align: center; 
 
    width: 34px; 
 
    margin-top: 64px; 
 
    margin-left: 20px; 
 
    margin-right: 20px; 
 
    background: transparent; 
 
    /*For z-index - keep the green area on top*/ 
 
    /*position: relative;*/ 
 
    /*z-index: 11;*/ 
 
} 
 
.or::after { 
 
    background: red; 
 
    content: ""; 
 
    display: block; 
 
    height: 116px; 
 
    margin-left: 15px; 
 
    margin-top: -68px; 
 
    width: 4px; 
 
    /*For z-index - keep the green area on top*/ 
 
    position: relative; 
 
    z-index: -11; 
 
}

<div class="or"></div>

来源

2016-09-14 11:56:41 aavrug

的解释可以使这是一个更好的解决方案。 – Pugazh

伪元素都被视为它们的相关元件的后代。因此.or::after将从.or继承z-index: 11。

刚刚从.or删除z-index和更新z-index: -1上.or::after

.or { 
 
    border: 2px solid #8fc300; 
 
    border-radius: 5px; 
 
    color: #333; 
 
    font-size: 17px; 
 
    font-weight: 600; 
 
    height: 34px; 
 
    line-height: 26px; 
 
    text-align: center; 
 
    width: 34px; 
 
    margin-top: 64px; 
 
    margin-left: 20px; 
 
    margin-right: 20px; 
 
    background: #fff; 
 
    /*For z-index - keep the green area on top*/ 
 
    position: relative; 
 
} 
 
.or::after { 
 
    background: red; 
 
    content: ""; 
 
    display: block; 
 
    height: 116px; 
 
    margin-left: 15px; 
 
    margin-top: -68px; 
 
    width: 4px; 
 
    /*For z-index - keep the green area on top*/ 
 
    position: relative; 
 
    z-index: -1; 
 
}

<div class="or"></div>

来源

2016-09-14 11:58:44 Pugazh

这里是一个可能的解决方案。

在.or元素上，不要设置z-index值并删除白色背景（但这可能不是您需要的）。

在:after伪元素上，设置为z-index: -1，这将导致它在父元素下呈现（绘制）。

.or { 
 
    border: 6px solid #8fc300; 
 
    border-radius: 5px; 
 
    color: #333; 
 
    font-size: 17px; 
 
    font-weight: 600; 
 
    height: 34px; 
 
    line-height: 26px; 
 
    text-align: center; 
 
    width: 34px; 
 
    margin-top: 64px; 
 
    margin-left: 20px; 
 
    margin-right: 20px; 
 
    /*background: #fff;*/ 
 
    /*For z-index - keep the green area on top*/ 
 
    position: relative; 
 
    /*z-index: 11;*/ 
 
} 
 
.or::after { 
 
    background: red; 
 
    content: ""; 
 
    display: block; 
 
    height: 116px; 
 
    margin-left: 15px; 
 
    margin-top: -68px; 
 
    width: 4px; 
 
    /*For z-index - keep the green area on top*/ 
 
    position: relative; 
 
    z-index: -1; 
 
}

<div class="or"></div>

来源

2016-09-14 12:01:09

z-index在:: after/:: before元素之后不起作用？

回答

相关问题