CSSを用いた相対位置決めの課題

Question

いヘッダmainbodyとfooter.ヘッダおよびmainbodyを適切に表.このフッタをお手本になるよう精進して参りま表裏mainbodyで使用した:

z-index: -1;
position: relative;
top: -60px;

これは望みの結果にか余分のスペースの60pxを行います。

どのような澄んだこの余分のスペース?

Answer 1

ポールに通知するものとします。 margin-top: -60px; の代わりに top: -60px;.もうひとつ解決する設定の"mainbody"を position: relative; その利用 position: absolute; bottom: 60px; のフッタ-このwoildとは、フッターのニーズを移動できる内"mainbody".ものの、親会社のフッター"mainbody"を使用できることと同じトリックその要素です。

Answer 2

下部の「余分な」スペースはフッターが取り上げられることのスペースです。比較的位置付け要素は、まだ彼らはどこか別の場所に表示されているにもかかわらず、ページのレイアウトフローで同じスペースを取るます。

あなたはあなたのメインボディにマイナスの下マージンを試みることができます。あなたは、あなたのフッターにtop: -60px;を必要としないこの手段を見つけることができます。

Answer 3

あなたはまだ使用することができます：

position: relative;
top: -60px;

あなたが必要とするセクションのが、セット

margin-top: -60px;

セクションの横に表示されています。この場合は - 。フッター

Answer 4

それを達成するための一つの方法は、それが文書の流れから取り出していますように、別の内側に配置さabsolute'lyのdivのdivを置くことであろう。

Answer 5

そうでもないあなたの質問に直接答えていますが、メインのコンテンツの後ろに表示したい内容に応じて、することができますおそらくちょうど偽それます。

画像it's場合、あなたは、単にhtml {}またはbody {}（またはすべてのコンテンツをカプセル化するDIV）に入れ、下にそれを揃えることができます。

Answer 6

は、このための別の解決策があります：

z-index: -1;
position: relative;
top: -60px;
margin-bottom: -60px;

トップ作成し、余分なマージンと余白ボトム削除して

これだけは、私のために働いた時間タグのためのいくつかの理由で

。ネガティブマージントップdoesntの作業