現在位置: start » study » javascript » jquery » z-index

文書の過去の版を表示しています。

Overlapping select field bug in IE 6

IE6ではselectタグ(Drop-down list)がDivレイヤーの上に、表示されるバグがある。
SelectタグをWindowsコントロールを使用して表示しているが、z-indexを無視するため、 selectタグが一番上に表示されることなのだ。

それを回避する方法がいくつあるが、ここではiframeを使い回避する方法を紹介する。

Demo page

<html> <head> <script type=“text/javascript” src=“./test/js/jquery-1.4.2.js”></script> <style type=“text/css”> 

div.sample{
	width:		300px;
	height:		240px;
	background-color:#8888ff;
	position:	absolute;
	padding:	10px;
	z-index:	100;
}
select.sample{
	z-index:	1;
	position:	absolute;
	text-align:	center;
	border-style:	solid;
	border-width:	2px;
	border-color:	red;
}
#shim{
	z-index:	10;
	position:	absolute;
	visibility:	hidden;
}

</style> <script language=“JavaScript”><!– 

var dragItem = null;
var initEventX, initEventY;
var initLeft, initTop;

      //初期化処理
      $(function(){
          $("div.sample").mousemove(function(e){dragMove(e);});
          $("div.sample").mouseup(function(e){dragOff(e);});
      });

      //ドラッグ開始
function dragOn(obj, e){
    var src = e.originalTarget;
    if(document.all){
	e = event;
	src = e.srcElement;
    }
    dragItem = obj;
    initEventX = e.screenX;
    initEventY = e.screenY;
    initLeft = parseInt(dragItem.style.left.replace('px', ''));
    initTop = parseInt(dragItem.style.top.replace('px', ''));
    return false;
}
//ドラッグ停止
function dragOff(e){
    dragItem = null;
}
//ドラッグ移動
function dragMove(e){
    if(document.all)e = event;
    if(!e || !dragItem)
	return;
          dragItem.style.left = (initLeft + e.screenX - initEventX) + 'px';
    dragItem.style.top = (initTop + e.screenY - initEventY) + 'px';
          setShim(dragItem);
    return false;
}
//shimの設定
function setShim(obj){
   	    var shim = $('shim');
    //objと位置、サイズを合わせる
          shim.css({left:obj.style.left, top:obj.style.top});
          shim.css({width:obj.offsetWidth, height:obj.offsetHeight});
  	    shim.css("visibility","visible");
      }

–> </script> </head> <body> <iframe scrolling=“no” frameborder=“0” id=“shim”></iframe> IE6でselectタグ(プルダウン)がz-indexを無視する対策 <div onmousedown=“dragOn(this, event);” class=“sample” style=“left: 150px; top: 250px;”> マウスでドラッグができます。<br /> width: 300px;<br /> height: 240px;<br /> background-color: #8888ff;<br /> position: absolute;<br /> padding: 10px;<br /> <b>z-index: 100;</b><br /> left: 150px;<br /> top: 250px;<br /> <br /> 移動するたびに、setShim関数でこのdivにiframeを重ねています。<br /> </div> <select class=“sample”> <option>z-index: 1;</option> <option>position: absolute;</option> <option>left: 300px;</option> <option>top: 20px;</option> <option>text-align: center;</option> <option>border-style: solid;</option> <option>border-width: 2px;</option> <option>border-color: red;</option> </select> </body> </html>











===== iframe issue ===== iframeタグがHTML4.01 Strict　及びXHTML1.0 Strictでは未定義というので、この回避策は使えない。
===== reference ===== - IE6でselectタグ(プルダウン)がz-indexを無視する対策


トレース: • monitor • select_2 • select • jquery • z-index