0

我有一个项目，其中包含 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;
}
4

1 回答 1

2

为了使 z-index 正常运行，应该设置位置属性，不管它是设置为绝对、相对还是固定。

于 2013-01-29T15:23:04.717 回答