html - 放置 3 个 div 但有额外的空白空间

Question

我有一个元素，其中包含 3 个 div，它们使用 css 中的 z 索引彼此叠加，但是当我将其应用于这三个并调整顶部位置时，在另外两个位置留下了很大的空白空间div 以前是。任何人遇到这个并想出如何解决它？

这是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>

这是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

为了z-index能够正常运行，需要设置position属性，不管是absolute、relative还是fixed。