CSSオーバーラップを使用した浮動

私が作業しているページに簡単な水平タブ構造を設定しようとしていますが、浮動小数点のdivとz-indexの組み合わせに問題があります。ブラウザに次のコードの表示CSSオーバーラップを使用した浮動

：

<!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> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Untitled Document</title> 
    <style type="text/css"> 
     #main { width: 500px; z-index: 1;} 

     .left { float: left; width: 96px; background-color: red; border: 2px solid orange; z-index: 2; margin-right: -2px } 
     .right { float: left; width: 396px; background-color: #09c; border: 2px solid green; z-index: 3; } 

     .clear { clear: both; } 
</style> 
</head> 

<body> 
    <div id="main"> 
     <div class="left"> 
      LEFT 
     </div> 
     <div class="right"> 
      RIGHT 
      <br /> 
      RIGHT 
     </div> 
     <div class="clear"></div> 
    </div> 
</body> 
</html>

はなぜ左側のdivのオレンジ色の境界線は、右のdivの緑色のボーダーと重なっていませんか？

出典

2009-02-23 Michael

z-indexプロパティは、静的に配置された要素には適用されません。 z-indexを使用するためには、CSSには静的以外の位置値（相対、絶対、固定）も含める必要があります。

.left { float: left; width: 96px; background-color: red; border: 2px solid orange; z-index: 3; margin-right: -2px; position: relative; } 
.right { float: left; width: 396px; background-color: #09c; border: 2px solid green; z-index: 2; position: relative; }

私が思うものをあなたに与えます。私はポジションを追加しました。 .leftのz-indexを3（2から）に変更し、.rightのz-indexを2（3から）に変更しました。

出典

2009-02-23 23:01:43

z-indexが配置されていない要素には効果（例えばposition:absolute;）

出典

2009-02-23 23:02:24

または 'position：relative;' –

負margin-leftを持っていませんか？

.right { float: left; width: 396px; background-color: #09c; border: 2px solid green; z-index: 3; margin-left: -5px;}

出典

2009-02-23 23:04:46 BenB

要素upperには、positionプロパティを使用します。 position:relativeを.leftに追加する。

出典

2015-03-26 03:21:59 Gelio

CSSオーバーラップを使用した浮動

答えて

関連する問題