0

css の z インデックスを使用して互いの上に重ねられる 3 つの div を含むプロジェクトがありますが、それを 3 つに適用して上部の位置を調整すると、他の 2 つの 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 が適切に動作するためには、position 属性を設定する必要があります。絶対、相対、固定のいずれに設定されていてもかまいません。

于 2013-01-29T15:23:04.717 に答える