html - 在不能绝对定位的 div 上使用 z 索引？

Question

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

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;
}

Answer 1

使用position:relative？这允许 z-index 但不会以相同的方式从文档流中删除。