を介して逆説的な効果を作成したいと思います z-index
CSSプロパティをます。
私のコードでは、下の画像のように5つの円があり、それらはすべて定義されていない絶対的な位置にあります z-index
。したがって、デフォルトでは、すべての円が前の円と重なっています。
現在、円5は円1とオーバーラップしています(左の画像)。私が達成したいパラドックスは、同時に、サークル1をサークル2の下に、サークル5の上に(右の画像のように)持つことです。
(ソース:schramek.cz)
これが私のコードです
マークアップ:
<div class="item i1">1</div>
<div class="item i2">2</div>
<div class="item i3">3</div>
<div class="item i4">4</div>
<div class="item i5">5</div>
CSS
.item {
width: 50px;
height: 50px;
line-height: 50px;
border: 1px solid red;
background: silver;
border-radius: 50%;
text-align: center;
}
.i1 { position: absolute; top: 30px; left: 0px; }
.i2 { position: absolute; top: 0px; left: 35px; }
.i3 { position: absolute; top: 30px; left: 65px; }
.i4 { position: absolute; top: 70px; left: 50px; }
.i5 { position: absolute; top: 70px; left: 15px; }
ライブの例は、 http://jsfiddle.net/Kx2k5/。
スタッキングオーダーやスタッキングコンテキストなど、さまざまなテクニックを試しました。これらのテクニックに関する記事をいくつか読んだが、成功しなかった。どうすればこれを解決できますか?