z-index不像預期的那樣呈現僞元素

爲什麼不是#para1呈現以上#para1:before？
CODEPEN HERE
z-index不像預期的那樣呈現僞元素

.para { 
 
    color: #fafafa; 
 
} 
 
#para1 { 
 
    background: blue; 
 
    padding: 0 0 20px 0; 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 
#para1:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 0px; 
 
    height: 0px; 
 
    border: 150px solid rgba(0, 0, 0, 0); 
 
    border-top: 0px solid rgba(0, 0, 0, 0); 
 
    border-right: 50px solid rgba(0, 0, 0, 0); 
 
    border-left: 500px solid rgba(0, 0, 0, 0); 
 
    border-bottom-color: red; 
 
    z-index: 1; 
 
    display: block; 
 
} 
 
#para1 { 
 
    font-size: 40px; 
 
}

<div id="para1" class="para"><span class="hpro">HELLO <span class="bold">WORLD</span> </span> <span class="satisfy">pre launch contest festival</span> 
 
</div>

來源

2014-12-27 Anubhav

你想要這個輸出http://jsfiddle.net/6yox39vx/ – 2014-12-27 14:12:14

或http://jsfiddle.net/6yox39vx/1/ – 2014-12-27 14:12:38

@VitorinoFernandes第二個。謝謝。 – Anubhav 2014-12-27 14:19:45

因爲#para正在建立一個新的stacking context本身。

嘗試刪除其z-index並給予負面z-index其僞子元素#para:before如下：

.para { 
 
    color: #fafafa; 
 
} 
 
#para1 { 
 
    background: blue; 
 
    padding: 0 0 20px 0; 
 
    position: relative; 
 
    /*z-index: 2;*/ 
 
} 
 
#para1:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border: 150px solid rgba(0, 0, 0, 0); 
 
    border-top: 0 solid rgba(0, 0, 0, 0); 
 
    border-right: 50px solid rgba(0, 0, 0, 0); 
 
    border-left: 500px solid rgba(0, 0, 0, 0); 
 
    border-bottom-color: red; 
 
    z-index: -1; 
 
} 
 
#para1 { 
 
    font-size: 40px; 
 
}

<div id="para1" class="para"><span class="hpro">HELLO <span class="bold">WORLD</span> </span> <span class="satisfy">pre launch contest festival</span> 
 
</div>

來源

2014-12-27 14:12:40

z-index不像預期的那樣呈現僞元素

回答

相關問題