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正常运行，应该设置位置属性，如果设置为绝对，相对或固定，则永远不要。

铺设3个div但有额外的空白区域

1 个答案: