z-indexの並び順について
理想の並び順は上の階層から
.square .square:before .circle .circle:before
にしたいと思っています。
現状のコードでは.square:before が最下部に来てしまい、またdiv要素にz-indexをつけてしまうと擬似要素がdiv要素の上に来てしまいます。
理想の並び順にすることは可能でしょうか?
よろしくお願いいたします。
HTML
1<div class="circle"> 2 <div class="square"></div> 3</div>
CSS
1.circle { 2 width: 30px; 3 height: 30px; 4 border-radius: 50%; 5 background: skyblue; 6 position: relative; 7} 8.circle:before { 9 content: ""; 10 width: 100%; 11 height: 100%; 12 border-radius: 50%; 13 background: #000; 14 position: absolute; 15 top: 5px; 16 left: 5px; 17 z-index: -1; 18} 19.square { 20 width: 20px; 21 height: 20px; 22 background: pink; 23 position: relative; 24} 25.square:before { 26 content: ""; 27 width: 100%; 28 height: 100%; 29 background: navy; 30 z-index: -1; 31 position: absolute; 32 top: 5px; 33 left: 5px; 34}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/01/11 08:46
2018/01/11 09:09