画像と画像、画像とボックスが重った場合の表示
例えば、ドロップダウンメニューが現表示画面に画像あると下に隠れてしまう、ドロップダウンメニューへ表示の順序をCSSで指定することで解消出来る。こうした場合、メニューに z-index を使うことで解決出来る。
1 2 |
/* CSS 表記 */ ul {z-index:1;} |
事例:テキスト文章にマウスを重ねて下さい。

重なりの順序を数値で指定します。0を基準として、値が大きいものほど前面(手前)に表示されます。
1 2 3 4 5 |
/* html 表記 */ <div class="test_box"> <img src="url" style="left:50px; position:absolute;" /> <p class="zindx_test">重なりの順序を数値で指定します。0を基準として、値が大きいものほど前面(手前)に表示されます。</p> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* css 表記 */ .zindx_test{ max-width:600px; border:1px solid #000; padding:5px 10px; } .test_box{height:90px; position:relative; } .test_box p:hover{ background-color:#cff; z-index:10; /* 画像にz-indexが内ので数値は、1以上でOK。*/ position:relative; /* これが無いとz-index が有効にならない。*/ } |