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

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン		前のリビジョン
study:javascript:jquery:z-index [2010/10/11 08:54] – bananastudy:javascript:jquery:z-index [2010/10/16 10:21] (現在) – banana
行 8: 行 8:
 <html> <html>
 <head> <head>
 +<script type="text/javascript" src="./test/js/jquery-1.4.2.js"></script> 
 +<script type="text/javascript" src="./test/js/jquery.draggable.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"> 
 +<!-- 
 +      $(function(){ 
 +          $("#block").draggable(); 
 +      }); 
 +// --> 
 +</script>
 </head> </head>
 +<body> 
 +<iframe scrolling="no" frameborder="0" id="shim"></iframe> 
 +IE6でselectタグ(プルダウン)がz-indexを無視する対策  
 +<div id="block" 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> </html>
 +\\
 +\\
 +\\
 +\\
 +\\
 +\\
 +\\
 +\\
 +\\
 +\\
 +\\
 +\\
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 ===== iframe issue ===== ===== iframe issue =====
 iframeタグがHTML4.01 Strict　及びXHTML1.0 Strictでは未定義というので、この回避策は使えない。\\ iframeタグがHTML4.01 Strict　及びXHTML1.0 Strictでは未定義というので、この回避策は使えない。\\
行 17: 行 102:
 ===== reference ===== ===== reference =====
   - [[http://www.programming-magic.com/20071107222415/|IE6でselectタグ(プルダウン)がz-indexを無視する対策]]   - [[http://www.programming-magic.com/20071107222415/|IE6でselectタグ(プルダウン)がz-indexを無視する対策]]
 +  - [[http://www.ibm.com/developerworks/jp/web/library/wa-aj-jquery6/|jQuery: 独自のプラグインを作成する]]
  
  

トレース: • z-index • select_2 • select • prevent_paste

QR Code
QR Code study:javascript:jquery:z-index (generated for current page)