css：親要素（z軸）の親の後ろに移動する

Question

私はthisを表示しています：親の後ろに（3次元で）表示する方法を示す記事。

#element { 

position: relative; /* optional */ 
width: 100px; 
height: 100px; 
background-color: blue; 
} 

#element::after { 
content: ""; 
width: 150px; 
height: 150px; 
background-color: red; 
left: 0px; 

/* create a new stacking context */ 
position: absolute; 
z-index: -1; /* to be below the parent element */ 
} 

これは親要素が別の要素にない限り有効です。

透明な白（rgba（255,255,255、.6））の背景を持つコンテナを作成し、内部にその要素を入れました。

：その前は、コンテナの後ろにあった。

しかし、：beforeの親にz軸索引を追加すると、：beforeは親の前を移動しますが、aprentの内容（テキスト）は引き続き表示されます。これは、テキストが透明な背景なしで要素の前（：前）に表示されるべきではないので、極端に混乱させます。

質問は次のとおりです。親と、：容器内の作業を外と同じにするにはどうすればいいですか？

#container { 
 
    padding: 20px; 
 
background-color:rgba(150,150,150,.8); 
 
} 
 
#element { 
 

 
position: relative; /* optional */ 
 
width: 100px; 
 
height: 100px; 
 
background-color: blue; 
 
} 
 

 
#element::after { 
 
content: ""; 
 
width: 150px; 
 
height: 150px; 
 
background-color: red; 
 
left: 0px; 
 

 
/* create a new stacking context */ 
 
position: absolute; 
 
z-index: -1; /* to be below the parent element */ 
 
}

<div id="container"> 
 
    <div id="element"></div> 
 
</div>

Answer 1

あなたはコンテナにposition: relative;とz-index: 1;を適用することができます。

#container { 
 
    padding: 20px; 
 
    background-color: rgba(150, 150, 150, .8); 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 

 
#element { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: blue; 
 
} 
 

 
#element::after { 
 
    content: ""; 
 
    width: 150px; 
 
    height: 150px; 
 
    background-color: red; 
 
    left: 0px; 
 
    position: absolute; 
 
    z-index: -1; 
 
}

<div id="container"> 
 
    <div id="element"></div> 
 
</div>