web-dev-qa-db-ja.com

負の相対配置問題を使用するCSS

ヘッダー、メインボディ、フッターがあります。ヘッダーと本体は適切にスタイル設定されています。ここでフッターをメインボディの後ろに表示したいので、次のように使用しました。

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

これで望ましい結果が得られますが、下部に60pxの余分なスペースができます。

この余分なスペースをクリアするにはどうすればよいですか？

csscss-position
20
codingbbq

ポールは正しいです。 margin-top: -60px;ではなくtop: -60px;。別の可能な解決策は、「メインボディ」をposition: relative;に設定し、フッターでposition: absolute; bottom: 60px;を使用することです。ただし、これはフッターを「メインボディ」内に移動する必要があることを意味します。ただし、フッターの親が "mainbody"で流れる限り、代わりにその要素で同じトリックを使用できます。

27
prodigitalson

下部の「余分な」スペースは、フッターが占めるスペースです。相対的に配置された要素は、他の場所に表示されていても、ページのレイアウトフローで同じスペースを占有します。

あなたはあなたのメインボディで負の下マージンを試すことができます。これは、必要ないことを意味するかもしれませんtop: -60px;フッターに。

6
Paul D. Waite

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

position: relative;
top: -60px;

必要なセクションに設定します

margin-top: -60px;

次のセクションへ。この場合-フッター。

4
Mike Shema

質問への直接の回答ではありませんが、メインコンテンツの背後に何を表示したいかによっては、おそらくそれを偽ることができます。

画像の場合は、html {}またはbody {}（またはすべてのコンテンツをカプセル化するdiv）を下に揃えます。

1
jeroen

これを実現する1つの方法は、divを別のabsolute 'に配置して、ドキュメントフローから取り出されるようにすることです。

1
raveren

これに対する別の解決策は次のとおりです。

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

topは余分なマージンを作成し、margin-bottomはそれを削除します

何らかの理由でhタグの場合、これは私にとってはうまくいきました。負のマージントップが機能しない

0
Mantas Karanauskas