CSS z-indexパラドックスフラワー


98

を介して逆説的な効果を作成したいと思います 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/

スタッキングオーダーやスタッキングコンテキストなど、さまざまなテクニックを試しました。これらのテクニックに関する記事をいくつか読んだが、成功しなかった。どうすればこれを解決できますか?


10
それがコーディングの挑戦だけなら、多分これはcodegolfに属していますか?
TylerH 2014年

12
OPは助けを求めていると思います。彼はそれを解決することが彼にとって挑戦であることを意味します。これは多くの人が一度行ってから学ぶことだと思います。私はこのテクニックが役に立つと思う。
LOTUSMS 2014年

@ 1ubos。jquery / JSはまったくありませんか?IndexOfを論理的に使用する必要があるように思われます
LOTUSMS '12 / 03/14

5
これは、z-indexを使用した場合は不可能です。z-indexはレイヤーを定義し、その整数のシーケンス:-x、0、xは使用できません:x1 <x2 <x1
gondo

4
偽のコードブロックで品質フィルターを回避しないでください。質問自体にコードを含めるか、必要でない場合はフィドルリンクを削除してください。さらに、質問を真剣に受け止めたい場合は、これをチャレンジではなく研究の実際の問題に言い換えることをお勧めします。
BoltClock

回答:


91

これが私の試みです: http://jsfiddle.net/Kx2k5/1/を
(正常にテストされFx27Ch33IE9Sf5.1.10及びOp19


CSS

.item {
   /* include borders on width and height */  
   -webkit-box-sizing : border-box;
   -moz-box-sizing    : border-box;
   box-sizing         : border-box;
   ...
}

.i1:after {
   content: "";

   /* overlap a circle over circle #1 */
   position : absolute;
   z-index  : 1;
   top      : 0;
   left     : 0;
   height   : 100%;
   width    : 100%;

   /* inherit border, background and border-radius */
   background    : inherit;
   border-bottom : inherit;
   border-radius : inherit;

   /* only show the bottom area of the pseudoelement */
   clip          : rect(35px 50px 50px 0);
}

基本的に私:afterは最初の円の上に擬似要素を重ねました(いくつかのプロパティが継承されていclip()ます)、それからプロパティでそれをクリップしましたので、その下部セクションのみを表示します(円が円#1と重なっているところ)#5)。

私はここで使用してきたCSSのプロパティでは、この例では、IE8にしても作業する必要があります(box-sizingclip()inherit、とpseudoelementsがサポートされています)


結果の効果のスクリーンショット

ここに画像の説明を入力してください


2
パーティーに遅刻したみたい!よくやった!:P
Ruddy

2
今日私はいくつかのCSSを学んだだけでなく、私のイタリア語を少し磨き上げました:Dありがとう
Natan Streppel

29

私の試みもを使用していclipます。アイデアは、のために半分ずつ持つことでしたdiv。そのように設定z-indexすればは機能します。

したがって、上部をz-index: -1に、下部をに設定できますz-index: 1

結果:

ここに画像の説明を入力してください

.item {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border: 1px solid red;
  background: silver;
  border-radius: 50%;
  text-align: center;
}
.under {
  z-index: -1;
}
.above {
  z-index: 1;
  overflow: hidden;
  clip: rect(30px 50px 60px 0);
}
.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;
}
<div class="item i1 under">1</div>
<div class="item i1 above">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>

ここでデモ

注: IE 10以降、FF 26以降、Chrome 33以降、Safari 5.1.7以降でテストされています。



18

これが私の挑戦です。

また、最初の円の上に配置された疑似要素を使用しますが、クリップを使用するのではなく、背景を透明にして、円の背景色(シルバー)と一致するボックスの影と赤を赤に設定します。円の境界線の右下をカバーする境界線。

デモ

CSS(開始点とは異なります)

.i1 { 
  position: absolute; top: 30px; left: 0px;
  &:before {
    content: '';
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    border-radius:  50%;
    box-shadow: inset 5px -5px 0 6px silver;
    border-bottom: solid 1px red;
  }
}

最終製品 ここに画像の説明を入力してください


素敵な答え!私が考えることができる唯一の問題は、ボックスシャドウがIE 8以下でサポートされていないことです。いずれにせよ、疑似要素はIE 7以下ではサポートされていません:)
Pragmatick

4

悲しいことに、以下は、理論的な答えです。何らかの理由で、 -webkit-transform-style: preserve-3d;、仕事に(明らかな間違いを犯さなければなりませんが、理解できないようです)。いずれにせよ、あなたの質問を読んだ後、私は-すべてのパラドックスと同様に-なぜそれが本当の不可能ではなく明白な不可能でしかないのか疑問に思いました。さらに数秒後、実生活では葉が少し回転しているので、そのようなものが存在することができることに気づきました。それで、私はテクニックの簡単なデモンストレーションを作りたかったのですが、前のプロパティなしでは不可能です(フラットな親レイヤーに描画されます)。いずれにせよ、ここに基本コードがあります

<div class="container">
    <div>
        <div class="i1 leaf">
            <div class="item">1</div>
        </div>
        <div class="i2 leaf">
            <div class="item">2</div>
        </div>
        <div class="i3 leaf">
            <div class="item">3</div>
        </div>
        <div class="i4 leaf">
            <div class="item">4</div>
        </div>
        <div class="i5 leaf">
            <div class="item">5</div>
        </div>
    </div>
</div>

そしてCSS:

.i1 {
    -webkit-transform:rotateZ(288deg)
}
.i2 {
    -webkit-transform:rotateZ(0deg)
}
.i3 {
    -webkit-transform:rotateZ(72deg)
}
.i4 {
    -webkit-transform:rotateZ(144deg)
}
.i5 {
    -webkit-transform:rotateZ(216deg)
}
.leaf { 
    position:absolute;
    left:35px;
    top:35px;
}
.leaf > .item {
    -webkit-transform:rotateY(30deg) translateY(35px)
}

そして、あなたはここで完全なコードを見つけることができます。


私にとってSafari 7.0.2で動作します。多分それはあなたのブラウザーですか?- 編集 -mehehe、preserve-3dは実際に機能していません。とにかく、合理的な3D :)
tomsmeding 2014年

2

JSフィドル

HTML

<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 id="five">5</div>
<div class="item2 i5"></div>
<div class="item3 i6"></div>

CSS

.item {
    width: 50px;
    height: 50px;
    line-height: 50px;
    border: 1px solid red;
    background: silver;
    border-radius: 50%;
    text-align: center;
}
.item2 {
      width: 25px;
    height: 50px;
    line-height: 50px;
    border: 1px solid red;
    border-right: none;
    border-radius: 50px 0 0 50px;
    background: silver 50%;
    background-size: 25px;
    text-align: center;   
        z-index: -3;
}
.item3 {
    width: 25px;
    height: 50px;
    line-height: 50px;
    border: 1px solid red;
    border-left: none;
    border-radius: 0 50px 50px 0;
    background: silver 50%;
    background-size: 25px;
    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: 55px;
}
.i5 {
    position: absolute;
    top: 70px;
    left: 15px;
}
.i5 {
    position: absolute;
    top: 72px;
    left:19px;

}
.i6 {
    position: absolute;
    top: 72px;
    left: 44px;
}
#five {
     position: absolute;
    top: 88px;
    left: 40px;
    z-index: 100;
}

item2とで冗長なものを削除することにより、コードを少し短くすることができますitem3。そしてまた、移動position: absolute.ix#fiveitemitem2そしてitem3
webprogrammer

0

JSフィドルライブデモ

IE8でも動作します。

HTML

<div class="half under"><div class="item i1">1</div></div>
<div class="half above"><div class="item i1">1</div></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;
}
.half {
    position: absolute;
    overflow: hidden;
    width: 52px;
    height: 26px;
    line-height: 52px;
    text-align: center;
}
.half.under {
    top: 30px; 
    left: 0px;
    z-index: -1;
    border-radius: 90px 90px 0 0;
}
.half.above {
    top: 55px;
    left: 0px;
    z-index: 1;
    border-radius: 0 0 90px 90px;
}
.half.above .i1 { margin-top:-50%; }
.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; }
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.