ホームページ > 記事 > ウェブフロントエンド > z-index なぜ .box1 .inner が .box2 より上にないのですか? _html/css_WEB-ITnose
z-index なぜ .box1 .inner が .box2 より上にないのですか? _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:11:14973ブラウズ
z-index なぜ .box1 .inner が .box2 より上にないのですか?
z-indexについてテストコードも含めて詳しく説明した記事はありますか？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>page title</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><body> <style type="text/css"> .box1,.box2,.box3,.inner{width:200px;height:200px;} .box1{background-color:red;position:relative;z-index:1;} .box2{background-color:green;position:relative;z-index:1;top:-30px;left:50px;} .box3{background-color:tan;} .inner{background-color:#3A80F3;position:absolute; left:20px;top:20px;z-index:1000;} </style> <div class="box1"> box1 z-index:1; <div class="inner">box1 inner z-index:1000</div> </div> <div class="box2">box2 z-index:1</div> <div class="box3"></div></body></html>
ディスカッションへの返信 (解決策)
.inner このスタイルのposition:absoluteは機能しません。position:absoluteに変更してください。
.box1{background-color:red;あなたのbox1はbox2の下にあり、あなたの内部はbox1の中にあるので、box1のz-indexをbox2より大きくするか、内部をデタッチすることしかできません。そうでなければ、とても悲しいです
異なるスタッキング コンテキストでは、要素の表示順序は、親のスタッキング コンテキストのスタック レベルによって決まります。
したがって、inner は box2 と比較するときに box1 のレベル値を使用します この記事を参照できます
http://www.blueidea.com/tech/web/2008/5975.asp
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。