2

次のコードを検討してください。

div {
    width:100%;
    height:64px;
    border:1px solid #000;
}

.top-fixed {
    position:fixed;
}

.middle-fixed {
    position:fixed;
    top:64px;
}

.bottom {
    margin-top:128px; #64+64
}
<html>
    <head></head>
    <body>
        <div class="top-fixed">Top Fixed</div>
        <div class="middle-fixed">Middle Fixed</div>
        <div class="bottom">Bottom</div>
    </body>
</html>

div.bottomの場合、最上位のdivと重ならないようにmargin-topプロパティを使用しています。しかし、それはdiv.topをもたらします-それ自体で固定された「ダウン」（フィドルを参照）。

どうすれば修正できますか？1つの方法は、margin-topの代わりにdiv.bottomにpadding-topプロパティを使用することですが、それはエレガントに聞こえません。

4

3 に答える 3

4

上位固定divで上位0を逃しました。

これを試して

.top-fixed {
  position:fixed;
  top:0;
}
于 2012-12-22T08:24:25.727 に答える
1

.bottom要素のCSSを次のように変更します。

.bottom {
    position:relative;
    top:128px; #64+64
}
于 2012-12-22T08:23:27.423 に答える
0

top:0;.top-fixedクラスに追加します。

于 2012-12-22T08:31:09.950 に答える