-2

コードは次のとおりです。

    <body style="margin: 0; background-color: #FFFFFF; color: #001f1f; font-family: 'Oxygen', sans-serif; font-size: 15px; background-image:url('img/2.png');">

<div style="width: 100%; height: 20px; position: fixed; background-color: #001f1f; text-align: right; color: #ffffff; padding-right: 100px;"><span style="float: left;">Search</span>View your shopping cart</div>
<div style="width: 100%; height: 100px; margin-top: 20px; position: fixed; background-color: #f1f1f1; box-shadow: 0px 3px 3px #c9c9c9;"><a href="#"><img src="img/logo.png" style="float:left;"></a></div>

Text example

「テキストの例」がそれらの固定divの動作をしないように変更するにはどうすればよいですか？

4

1 に答える 1

1

http://jsfiddle.net/k7um4/

position: fixed要素をフローから移動します。したがって、DOMの位置にある次の要素には影響しません。最初のdivには高さがありますが、フロー内の実際のスペースを占めることはありません。「テキストの例」は、残されたスペースを埋めるために上にスライドするだけです。

要素が表示されるようにするには、コンテナ要素（体）にパディングを追加することで、要素が占めるスペースに対応する必要があります。フィドルを追加し、top: 0px両方の要素にを指定しました（要素を修正する場合は、おそらく上/左の位置を指定する必要があります）。

于 2013-03-25T19:22:37.233 に答える