5

絶対位置の要素を含むサイトがあります。たとえば、サイトの上部のナビゲーション：

#topNav
{
  position:     absolute;
  top:          100px;
  left:         50%;
  height:       40px;
  width:        1000px;
  margin-left:  -500px;
}

次のサイトのようなスティッキーフッターを作成しました：http： //ryanfait.com/resources/footer-stick-to-bottom-of-page/

ここで問題となるのは、topNavが絶対的に配置されているため、フッターがtopNavと「オーバーラップ」することです。つまり、「要素の通常のフロートの外側」にあります。相対位置は、前にtopNavがあることに「気付く」ことはありません。

絶対位置の要素ごとに追加の「pusherdiv」を作成する前に、「pusher div」よりも優れた方法があるかどうか、または要素に絶対位置を使用しないようにする必要がありますか？

編集： ここでJsFiddle： http: //jsfiddle.net/dkxUX/15/

ブラウザウィンドウを縮小すると、その前のすべての要素に#footerが重なっていることがわかります。

4

2 に答える 2

2

140pxの上部マージン/パディングをボディまたは他のコンテナ要素に適用するだけで、topNavの高さとオフセットが考慮されます。

さらに良いことに、この場合、位置を絶対に設定しないでください。あなたがしているのは、1000px幅のdivを水平方向に中央に配置することだけであるように見えます。

/*top-margin of 100px + center the element*/
#topNav {width:1000px; height:40px; margin:100px auto 0;}

更新：あなたのjsfiddleが表示されます。最初の段落で提案されているように、マージン/パディングを設定するときに、絶対に配置されたすべての要素を考慮することができます通常のドキュメントフローが信頼できる場合は、絶対位置の要素を使用しています。

于 2012-06-22T08:26:37.327 に答える
2

答えを出すには少し遅すぎますが、将来誰かを助けるかもしれません、私はそれほど前にその問題を思いついたので、CSSソリューションを思い付くことができなかったのでjqueryを使用してそれを撃ちましたDOCTYPEタグを削除していませんでした（とにかく、これはあなたがすべきことではありません）。

だからここにあります。

$("#CONTAINERDIV").prepend("<div id='relativefix' style='position:relative;margin-top:"+($("#YOUR_ABSOLUTE_DIV").offset().top+$("#YOUR_ABSOLUTE_DIV").outerHeight()+30)+"px'></div>");


$(window).resize(function(){
$("#relativefix").css("margin-top",($("#YOUR_ABSOLUTE_DIV").offset().top+$("#YOUR_ABSOLUTE_DIV").outerHeight()+30)+"px");
            });

そうですね、これですべてです。絶対divの下にハード配置されたコンテナの先頭に別のdivを動的に追加するだけで、後続のすべての相対divが強制的に追加されます。これは明確な修正のようなものです。アイデアを使い果たした人。

于 2014-05-15T18:39:53.327 に答える