在不能完全定位的div上使用z索引？

我有一個佈局，我正在製作，這個想法是卡片，它們放在一個堆棧中，當一張卡片帶有z索引時，可以看到堆棧的左側和右側。我已經做好了佈局，但是現在我正在用頭撞牆，試圖弄清楚如何在div中使用z-index，因爲div已經在具有特定位置的父級中。在不能完全定位的div上使用z索引？

Layout location ~

要使用的z-index，我需要給「卡」的絕對位置，但廢墟邊緣使得卡片堆棧上海誓山盟的頂部。有任何想法嗎？？感謝您的提前和愉快的假期！

下面是一個示例：

（這是一個的Tumblr主題以供參考} HTML：

<div id="page"> 
    <div id="content_container"> 
    <div id="content"> 
     {block:Posts} 
     <div class="card"> 
     {Tags in here create multiple <div class="card"></div>'s} 
     </div> 
     {/block:Posts} 
    </div> 
    </div> 
</div>

CSS：

html { 
height: 100%; 
width:100%; 
} 

body { 
height:100%; 
width:100%; 
font-family:'HelveticaRegular', Helvetica, Arial, Sans-Serif; 
color:#FFF; 
background:#000; 
overflow:hidden; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
margin:0; 
padding:0; 
} 

#page {display:table;margin:0px auto;height:100%;width:100%; background:#FF0000; 
width:969px;} 
*:first-child+html #page {position:relative;}/*ie7*/ 
* html #page{position:relative;}/*ie6*/ 

#content_container{display:table-cell;vertical-align: middle;} 
*:first-child+html #content_container{position:absolute;top:50%;}/*ie7*/ 
* html #content_container{position:absolute;top:50%;}/*ie6*/ 

*:first-child+html #content{position:relative;top:-50%;}/*ie7*/ 
* html #content{position:relative;top:-50%;}/*ie6*/ 

#content_container{display:table-cell;vertical-align: middle;} 

.card { 
margin-right:-670px; 
float:left; 
width:700px; 
height:500px; 
background:#EEE; 
-moz-box-shadow: 2px 2px 2px 2px #000; 
-webkit-box-shadow: 2px 2px 2px 2px #000; 
}

來源

2011-12-27 Earl Larson

使用position: relative這使z-index的，但沒有按以相同的方式從文檔流中刪除。

來源

2011-12-27 08:28:02

在不能完全定位的div上使用z索引？

回答

相關問題