0 
<body>
 <div id="red" class="colorbox"><p>RED</p>
  <div id="green" class="colorbox"><p>GREEN </p>
   <div id="blue" class="colorbox"><p>BLUE</p>
   </div>
  </div>
 </div>
</body>

次のように配置するにはどうすればよいですか。

赤いブロックは、Z 軸の他の 2 つの間に配置されます。
緑のブロックは赤のブロックの後ろに配置されます。
青いブロックは赤いブロックの前に置かれます。

このようなもの：

#red { z-index: 2; }
#green { z-index: 1 }
#blue { z-index: 3 }

おかげで非常に進んでください！

更新しました：

これが私のコードです: http://jsbin.com/ihizot/3/edit

4

4 に答える 4

3

z-indexを機能させるには、これらの各要素に位置を設定する必要があります。

position：absolute、position：relative、またはposition：fixed

例：

<div id="green" class="colorbox"><p>RED</p>
  <div id="red" class="colorbox"><p>GREEN </p>
   <div id="blue" class="colorbox"><p>BLUE</p>
   </div>
  </div>
 </div>

.colorbox {
  position:relative;
  height:50px;
  width:50px;

}
#red { 
  background:red;
  z-index: 2; 
}
#green { 
  z-index: 1;
  background: green;
}
#blue { 
  z-index: 3;
  background:blue;
}
于 2013-01-14T21:52:33.213 に答える
1

技術的には、CSS 疑似要素を使用して実際に可能であり、ほとんどのブラウザーで動作します。次のように「赤い」ボックスを再作成すると:

#red:after {
background-color: #f00;
top: -5px;
left: -5px;
z-index: 2;
position: absolute;
font-weight: bold;
width: 400px;
height: 400px;
border: 5px solid white;
font-size: 70pt;
content:"RED";

}

他の 2 つの微調整を行うと、他の 2 つの中間に位置するこの例が得られます。これは最も洗練されたソリューションではないかもしれませんが、提供されたシナリオでは機能します。

于 2013-01-15T00:10:10.240 に答える
1

簡単に言えば、これを行うことはできず、100% クロス ブラウザーをサポートすることはできません (mookamafoob疑似要素 :after を使用して赤いボックスを再作成することによる回答を参照してください (サポートされていない < IE8))。

赤と青の div は緑に含まれているため、赤のスタック コンテキストをその上にプッシュすることはできません。

必要に応じてこれらをスタックするために必要な z-index と css となる単純なフィドルを作成しましたが、マークアップが「間違って」ネストされているため、赤は緑と青の div の間をプッシュできません。

#red {
  position:absolute;
  z-index:2;
  top:15px;
  left:15px;
  height:100px;
  width:100px;
  background-color:red
}
#green
{
  position:absolute;
  top:0px;
  left:0px;
  z-index:1;
  height:100px;
  width:100px;
  background-color:green;
}
#blue
{
  position:absolute;
  z-index:3;
  top:30px;
  left:30px;
  height:100px;
  width:100px;
  background-color:blue;
}

私の知る限り不可能であり、ブラウザのレンダリングエンジンでこれが起こる理由について、誰かが正しい用語を使用すると確信しています（誰か？）

于 2013-01-14T22:05:36.347 に答える
0

Z-indexをいじる代わりに、マークアップを変更することはできませんか?

<div id="green" class="colorbox"><p>GREEN </p>
    <div id="red" class="colorbox"><p>RED</p>  
      <div id="blue" class="colorbox"><p>BLUE</p>
      </div>
  </div>
</div>
于 2013-01-14T22:06:49.327 に答える