Question

I have an project that includes 3 divs to be layered on top of each other using the z index in css, but when I apply that to the three and adjust the top positioning, theres a big empty space left where the two other div were previously. Anyone come across this and figured out how to resolve it?

Heres the html

<div id="kit" data-role="page" data-theme="a">
    <div data-role="header">
        <h1>HI 9829 Kit</h1>
    </div>

    <div class="kit edgeLoad-EDGE-1809939789" style="margin: auto;"></div>

    <div class="container edgeLoad-EDGE-1809939789"></div>

    <div class="buttons edgeLoad-EDGE-1809939789">
        <a href="#a1" class="dot edgeLoad-EDGE-1809939789" style="top: 138px; left: 28px"></a>
        <a href="#a18" class="dot edgeLoad-EDGE-1809939789" style="top: 45px; left: 261px"></a>
    </div>

      <div data-role="footer" data-position="fixed">
          <h3>©2013</h3>
      </div>
 </div>

and heres the css

#kit .kit{
    width:700px;
    height:670px;
    background-image:url(../img/9829-Kit_2.png);
    z-index:1;
}   

#kit .buttons{
    position: relative;
    margin: auto;
    height: 670px;
    width: 700px;
    z-index:3;
}

#kit .container {
    position: relative;
    margin: auto;
    background-image: url(../img/9829-Kit.png);
    background-repeat: no-repeat;
    height: 670px;
    width: 700px;
    z-index:2;
}

Answer 1

In order for the z-index to operate properly, position attribute should be set, nevermind if it is set to absolute, relative, or fixed.