有沒有辦法做一個z-索引圈？

如果我需要#element-one是上述#element-two，#element-two是上述#element-three，並且#element-three將高於#element-one，有沒有辦法用CSS來做到這一點？任何其他方式？有沒有辦法做一個z-索引圈？

alt text

來源

2011-01-09 Kerrick

這是一個非常有趣的問題。然而，我基本上的答案是否定的，這可能是一個伎倆一點點的破解;）非常有興趣在這裏看到一個體面的答案。注意：在你的樣品中你有3個元素，這將意味着元素被旋轉？並進一步：你想要什麼CSS版本，並允許JavaScript黑客入侵？ – 2011-01-09 08:51:55

我不認爲這可以做期。它需要一個元素具有多個z-index值。非常有趣的問題，但我確實認爲你需要模擬效果......你在理論上問，還是你有要求？如果後者可以發佈一個模擬版本進行檢查？謝謝！ – lnrbob 2011-01-09 09:35:56

我不知道有什麼方法來做到這一點在CSS或JavaScript ..

我將一個元素分成兩個部分，沒有它是由用戶察覺。（實際上這是不可能在任何情況下，例如使用文本框，但它的圖像效果很好。）

所以#element-one-part-A高於#element-two，#element-two高於#element-three，並且#element-three高於#element-one-part-B。從技術上講，這不是一個Z-索引圈，但它看起來像。

來源

2011-01-09 10:18:35 Floern

這是不可能的。 z-index與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

有沒有辦法做一個z-索引圈？

回答

相關問題