Q&A
やっていることは、どうにか理解できました。
とても手間なので素直にhtmlを変更したほうが楽ですね。
ありがとうございます。
クラスAのボックスを、クラスBよりも上に配置したいですが、z-indexの値を変えても上手くいきません。
どうすればよいでしょうか？
よろしくお願いします。
html
1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <title>Document</title> 8 <link rel="stylesheet" href="style.css" /> 9 </head> 10 <body> 11 <div class="A"> 12 1番上にしたい 13 <div class="B">2番</div> 14 </div> 15 </body> 16</html> 17
css
1.A { 2 position: fixed; 3 top: 0; 4 left: 0; 5 z-index: 100; 6 width: 100px; 7 height: 100px; 8 background-color: lightblue; 9} 10 11.B { 12 position: fixed; 13 top: 0; 14 left: 0; 15 z-index: 10; 16 width: 200px; 17 height: 200px; 18 background-color: lightcoral; 19}
回答2件
0
BはAの子ですが、親子関係にあるボックスの描画順は、z-index で制御できません。同一のコンテナの子ボックスどうしでだけ z-index で描画順を制御できます。
HTMLを以下のようにすると期待どおりになります。
html
1 <div class="A"> 2 1番上にしたい 3 </div> 4 <div class="B">2番</div>
投稿2021/11/11 12:40
総合スコア21640
0
ベストアンサー
他の方の回答にもあるように、HTMLで要素が兄弟関係になるように書き換えるのが簡単です。
現状のHTMLだと、
Aクラスのz-indexをいくら大きくしても、Aクラスの上にBクラスは載っているので、一緒に移動しますので、前後関係は変わりません。
Bクラスのz-indexにマイナスを設定すると、Aクラスの下に潜り込ませることができるので、「1番上にしたい」というテキストは表示されます。
css
1.B { 2 position: fixed; 3 top: 0; 4 left: 0; 5 z-index: -1; 6 width: 200px; 7 height: 200px; 8 background-color: lightcoral; 9}
ただし、背景は前面に出すことはできません。見えるのはテキストだけです。
Aクラスの背景色も表示させたいとなると、疑似要素を使うなどして無理やりすることになります。
css
1.A { 2 position: fixed; 3 top: 0; 4 left: 0; 5 width: 100px; 6 height: 100px; 7} 8.A:before { 9 content: ""; 10 display: block; 11 position: absolute; 12 width: 100%; 13 height: 100%; 14 background-color: lightblue; 15 z-index: -1; 16} 17.B { 18 position: fixed; 19 top: 0; 20 left: 0; 21 z-index: -2; 22 width: 200px; 23 height: 200px; 24 background-color: lightcoral; 25}
可能なら素直にHTMLを変更するほうがいいでしょう。
投稿2021/11/11 13:26
総合スコア34064
z-indexはややこしいです。私も完全には理解できていないので、雰囲気でやってます。
下記辺りを参考にして学習してみてください。
君は真に理解しているか？z-indexとスタッキングコンテキストの関係 - ICS MEDIA
https://ics.media/entry/200609/
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/11/11 13:20