前提
CSSのz-indexについて
子要素にのみz-index:-1を指定すると、親要素の背面に行きます。
重なり順：子要素背景→親要素背景→親要素文字
親要素のみz-index:1を指定してもデフォルトから変化はありません。
重なり順：親要素背景→親要素文字→子要素背景
ここで、親要素にz-index:1を指定して、子要素にz-index:-1を指定すると子要素の背景が、親要素の文字と背景の間に来る理由が分かりません。
重なり順：親要素背景→子要素背景→親要素文字
ご回答宜しくお願い致します。
該当のソースコード
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="oya"> 親要素 <div class="ko"></div> </div> </body> </html>
CSS
oya{ background-color:aqua; height:300px; width:200px; position:relative; z-index:1; } .ko{ padding-top:10px; background-color: brown; height:100px; width:100px; position:absolute; top:0; }
画像
0 コメント