CSS幫助創建一個框，我有層疊在一起

我想一個盒子：

我想要的卡直接在每個頂部堆疊在平坦......不是垂直。這樣我可以使用jQuery來告訴瀏覽器顯示哪張卡，而不必重新輸入所有內容。

我認爲GMAIL會做類似這樣的事情......當您單擊郵件時，它會將郵件放在收件箱的頂部，將收件箱保留在背景中，您會看到收件箱。

想法？

2010-11-20 AnApprentice

另一種區分可見div和隱藏div的方法是使用例如，選擇器：第一個孩子。下面是一個例子，通過在DOM樹中更改它的位置來隱藏一個div，並且CSS只讓第一個孩子可見。

<html> 
    <head> 
    <style type="text/css"> 
    #container div { display: none; width: 400px; height: 250px } 
    #container div:first-child { display: block; } 
    </style> 
    <script type="text/javascript"> 
    function hide(div) 
    { 
     var container = document.getElementById("container"); /* Or use jQuery */ 
     container.appendChild(div); 
    } 
    </script> 
</head> 
<body> 
<div id="container"> 
    <div style="background-color: red" onclick="hide(this)">Click to hide</div> 
    <div style="background-color: blue" onclick="hide(this)">Click to hide</div> 
    <div style="background-color: yellow" onclick="hide(this)">Click to hide</div> 
</div> 
</body> 
</html>

來源

2010-11-20 22:04:09

我不知道我理解你的問題，但有一堆在同一地點的div但不同深度的，你應該：

給這些div的位置屬性（絕對或相對的，取決於你的需要）把它們放在同一個地方
使用z-index，給他們不同的深度來顯示和隱藏它們。
使用jQuery改變z-index的需要

來源

2010-11-20 19:31:54

這聽起來像你追求的是直接，然後加載所有這些內容使用jQuery只是顯示和隱藏的東西。

CSS：

.box {width: 100px; height: 100px;} 
.box.hidden {display: none;}

HTML：

<div class="box"><!-- your default content --></div> 
<div class="box hidden"><!-- your hidden content --></div> 
<div class="box hidden"><!-- your hidden content --></div>

然後只需使用jQuery顯示<div>你想可見，並隱藏其他人。它的行爲就好像它們都堆疊在一起。

來源

2010-11-20 21:16:59 Tom

CSS幫助創建一個框，我有層疊在一起

回答

相關問題