画像と画像、画像とボックスが重った場合の表示2019-5-6修正

例えば、ドロップダウンメニューが現表示画面に画像あると下に隠れてしまう、ドロップダウンメニューへ表示の順序をCSSで指定することで解消出来る。こうした場合、メニューに z-index を使うことで解決出来る。

  /*   CSS 表記   */ 
  ul {z-index:1;}

1 2	/* CSS 表記 */ ul {z-index:1;}

事例：テキスト文章にマウスを重ねて下さい。

重なりの順序を数値で指定します。0を基準として、値が大きいものほど前面（手前）に表示されます。

/*   html 表記   */ 
<div class="test_box">
<img src="url" style="left:50px; position:absolute;"  />
<p class="zindx_test">重なりの順序を数値で指定します。0を基準として、値が大きいものほど前面（手前）に表示されます。</p>
</div>

/* html 表記 */

<p class="zindx_test">重なりの順序を数値で指定します。0を基準として、値が大きいものほど前面（手前）に表示されます。</p>

</div>

/*   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が内ので数値は、１以上でＯＫ。*/
  position:relative;     /* これが無いとz-index が有効にならない。*/
}

/* 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が内ので数値は、１以上でＯＫ。*/

position:relative; /* これが無いとz-index が有効にならない。*/

}