CODEWITHSUNDEEP
htmlcssz-index
Earl Larson
Earl Larson

Reputation: 5309

Using z index on divs that CAN'T be positioned absolutely?

I have a layout I'm making and the idea is cards and they are layed out in a stack and the left and right sides of the stack can be seen when one card is brought forward with z index. I have the layout made but I'm now banging my head against a wall trying to figure out how to use z-index with the divs because the divs are already in a parent that has a specific position.

Layout location ~

To use z-index, I would need to give "card" an absolute position, but that ruins the margin making the cards stack on top of eachother. Any ideas?? THANKYOU IN ADVANCE AND HAPPY HOLIDAYS!

Below is a sample:

(It's a Tumblr theme for reference} 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;
}

Upvotes: 0

Views: 201

Answers (1)

Rich Bradshaw
Rich Bradshaw

Reputation: 72965

Use position: relative? That allows z-index but doesn't remove from the document flow in the same way.

Upvotes: 2

Related Questions