在无法绝对定位的 div 上使用 z 索引？

Question

我正在制作一个布局，其想法是卡片，它们被放置在一个堆栈中，当一张卡片通过 z 索引向前移动时，可以看到堆栈的左侧和右侧。我已经完成了布局，但现在我正在用头撞墙，试图找出如何将 z-index 与 div 一起使用，因为 div 已经位于具有特定位置的父级中。

布局位置 ~

要使用 z-index，我需要给“card”一个绝对位置，但这会破坏使卡片堆叠在一起的边距。有什么想法吗？提前致谢，祝您节日快乐！

下面是一个示例：（

这是一个 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;
}

Answer 1

使用位置：相对？这允许 z-index 但不会以相同的方式从文档流中删除。