在不能完全定位的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索引？

回答

相关问题