4

画面の表示部分の右側にサイドバー要素を配置しました（この部分はすでに機能しています！）。サイドバーはいくつかのDIVで構成されています。それらのいくつかは私が気にしませんが、最後の（最も低い）ものは、ユーザーがページを下にスクロールしたときに「消える」べきではありません。そして、ここが私が立ち往生しているところです。ある意味で、トップの位置は、ブラウザウィンドウの表示されているトップの0未満であってはなりません。それはCSSとより良いブラウザでさえ可能ですか？

サイドバーの私の定義は次のとおりです。

div#sidebar{font-size:95%; float: right;width: 150px; margin-top:20px;}
div#sidebar div{padding: 5px 0;margin-bottom: 5px}

画面の表示部分に残しておきたい要素は次のとおりです。

div#navtop{background:#B3B3E3 url(/css/blue.jpg); margin-bottom:0px;}
div#navsoc{background:#B3B3E3 url(/css/blue.jpg); margin-bottom:0px; top:!important 0px;}

2番目の要素「navsoc」は、表示されている部分に残しておく必要があります。しかし、それは「navtop」や私がそこで定義した他のものとまったく同じように動きます。

<div id="sidebar">
<div id="navsoc">
keep me inside the window!
</div>
</div>
4

2 に答える 2

8

私はあなたが必要だと思います

position:fixed;

したがって、要素はウィンドウに対して相対的に配置されるため、スクロールすると常に表示されます。

デモ： http： //jsfiddle.net/mJubt/

!importantまた、値を設定したい場合は、top:0!importantの代わりにを使用してtop:!important 0ください。

そして、あなたが0pxユニットを書く必要がないとき、あなたはただを使うことができます0。

于 2012-09-01T19:59:16.847 に答える
0

topCSSで使用する場合は、要素positionがstatic（デフォルト）ではなく、、absoluteまたはrelativeであることを確認する必要がありますfixed。したがって、top:0この場合は機能していません。また、位置をこれらのいずれかに変更すると、さまざまな動作が発生します。

固定されている場合、要素はウィンドウに対して相対的な位置になります。相対的または絶対的な場合はzero pixels、で最も近い要素の上部からの位置になり、位置は。DOMとは異なりstaticます。

上記の要素の内容が#navsoc柔軟な高さである場合、その位置を尊重することはできず、同時にスクロールで移動することもできません。それを実現するにはJavascriptが必要です。

最初の部分は少し話題から外れています。それを知っておくのは良いことだと思います。

ここにフィドルがあります。

于 2012-09-01T20:50:45.980 に答える