12

div を作成し、位置を指定しました: このスタイル シートを使用して修正しました:

CSS

position: fixed;
top: 35px;
z-index: 9999;
height:60px;
background:#000;
width:100%;

今私が欲しいのは、このdivの高さがゼロの場合、直後のdivが上のdivの代わりになるはずです。div の高さがゼロでない場合、この div の後の次の div には上の div からのマージンが必要で、両方の div が互いに重ならないようにします。

4

4 に答える 4

16

固定 (または絶対) 要素がある場合、その要素の後に要素はありません。固定要素はドキュメント フローから取り出されます。

固定位置で 2 つの要素を連続させたい場合は、固定されたコンテナーを作成し、その中に 2 つの要素を配置します。

周囲に上部マージンを持つ別のコンテナーを配置し、2 番目の要素に上部マージンを設定できます。最初の要素が空の場合、マージンを持つものは何もないため、マージンはコンテナーの外側で折りたたまれ、2 番目の要素はコンテナーの上部になります。

(マージンは固定要素の外側では折りたたまれないため、2 番目のコンテナーが必要です。)

デモ: http://jsfiddle.net/Guffa/r5crS/

于 2012-09-13T11:53:55.283 に答える
5

jQuery を使用できる場合:

$(document).ready(function() {
  var height = $("#one").height();
  if(height > 0)
  {
      $("#two").css("margin-top","10px");
  }
});

デモ

于 2012-09-13T11:54:02.210 に答える
0

他の回答の影響を大きく受けて、コンテンツを追加するための 2 番目の要素を必要としない、少し単純なバージョンを次に示します。ドキュメント本体全体の上マージンを設定するだけで、残りの固定されていないコンテンツが上の固定 div の下に配置されるようにします。

        function set_body_top_margin() {
            var menuHeight = $("#top_div").height();
            $(document.body).css("margin-top", menuHeight);
        }
        $(document).ready(set_body_top_margin);
        $(window).resize(set_body_top_margin);

注: 何らかの理由でトップ div のサイズが変更された場合は、別の場所に別の呼び出しを追加する必要がありますset_body_top_margin()。

于 2021-08-30T23:03:36.230 に答える