Zインデックスサークルを行う方法はありますか？

#element-oneが#element-twoより大きく、#element-twoが#element-threeより大きく、#element-threeがより大きくなる必要がある場合は、CSSでこれを行う方法はありますか？その他の方法で？Zインデックスサークルを行う方法はありますか？

alt text

出典

2011-01-09 Kerrick

でこれexempleを参照してください。しかし、私は基本的に答えはいいえ、少しトリックを行うハックになる可能性があります;）ここでまともな答えを見て非常に興味があります。注：サンプルには3つの要素があります。つまり、要素が回転していますか？さらに、どのCSSバージョンが必要か、JavaScriptのハックは許可されていますか？ –

これは期間が終了するとは思いません。 1つの要素に複数のz-index値が必要です。非常に興味深い質問ですが、あなたは効果をシミュレートする必要があると思います...あなたは理論的に求めているのですか、それとも要件がありますか？後者の場合は、検査のための模擬バージョンを投稿することができますか？ありがとう！ – lnrbob

CSSは時にはビザンチンであるかもしれませんが、[MC Escher]（http://en.wikipedia.org/wiki/M._C._Escher）のページレイアウトを作成する基準にはならないと思いますまだ。 CSS 3でさえそうではありません。 –

私は、CSSやJavaScriptでこれを行うための任意の方法を知らない...

私はそれをユーザーが気づいていますせずに、二つの部分に一つの要素を分割します。（実際、これは、例えばテキストボックスと、すべての場合には不可能であるが、それはイメージでうまく動作。）

だから#element-one-part-Aは#element-twoが#element-three上にある、#element-two以上である、そして#element-threeは#element-one-part-B以上です。技術的にはZインデックスサークルではありませんが、そのように見えます。

出典

2011-01-09 10:18:35 Floern

これは不可能です。 Z-インデックスはPhotoshopのレイヤーのようなもので、値はスタック内の位置です。

いくつかのJavaScriptで不正行為を試すことはできますか？

は、これは非常に興味深い質問である4つの要素

<html> 
<body> 
    <div id="container"> 
    <div id="e1" class="common"> 
     this is element 1 
     this is element 1 
     this is element 1 
    </div> 
    <div id="e2" class="common"> 
     this is element 2 
     this is element 2 
     this is element 2 
    </div> 
    <div id="e3" class="common"> 
     this is element 3 
     this is element 3 
     this is element 3 
    </div> 
    <div id="e4" class="common"> 
     this is element 4 
     this is element 4 
     this is element 4 
    </div> 
    </div> 

    <style> 
    html { font-size: 3em;} 
    .common { 
     position: absolute; 
     overflow: hidden; 
    } 
    .clone { 
     color: red; 
     margin-top: -100%; 
     background-color: rgba(200, 0, 100, .5) !important; 
    } 
    .window { 
     overflow: hidden; 
     width: 50%; 
     height: 50%; 
     position: absolute; 
     bottom: 0; 
     left: 0; 
     background-color: rgba(0,0,0, .2); 
    } 
    #container { 
     width: 600px; 
     height: 600px; 
     margin: auto; 
     background: #eee; 
     position: relative; 
    } 
    #e1 { 
     background: yellow; 
     color: orange; 
     width: 100px; 
     height: 500px; 
     top: 50px; 
     left: 100px; 
    } 
    #e2 { 
     background: lightblue; 
     color: blue; 
     width: 500px; 
     height: 100px; 
     top: 100px; 
     left: 50px; 
    } 
    #e3 { 
     background: red; 
     color: pink; 
     width: 100px; 
     height: 500px; 
     bottom: 50px; 
     right: 100px; 
    } 
    #e4 { 
     background: lightgreen; 
     color: green; 
     width: 500px; 
     height: 100px; 
     bottom: 100px; 
     right: 50px; 
    } 
    </style> 
    <script> 
    (function() { 
     var clone = document.getElementById('e1').cloneNode(true); 
     clone.className = 'common clone'; 

     var view = document.createElement('div'); 
     view.className = 'window'; 
     view.appendChild(clone); 

     document.getElementById('container').appendChild(view); 
    })(); 
    </script> 
</body> 
</html>

出典

2011-01-09 10:38:40

これは 'x-index'ではなく' z-index'です）= –

houps！整流された^^ –

Zインデックスサークルを行う方法はありますか？

答えて

関連する問題