У меня есть макет, который я делаю, и идея в том, чтобы карты были выложены в стопку, и левая и правая стороны стека можно увидеть, когда одна карта выдвигается с индексом z. У меня есть макет, но я сейчас бьюсь головой о стену, пытаясь понять, как использовать z-index с div, потому что div уже находится в родительском объекте, который занимает определенную позицию.
Расположение макета ~
Чтобы использовать 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;
}