web-dev-qa-db-fra.com

CSS utilisant un problème de positionnement relatif négatif

J'ai un en-tête, un corps principal et un pied de page. L'en-tête et le corps principal sont correctement stylés. Maintenant pour le pied de page je veux le faire apparaître derrière le corps principal, alors j'ai utilisé:

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

Cela donne le résultat souhaité, mais j'obtiens un espace supplémentaire de 60 pixels au bas.

Comment puis-je effacer cet espace supplémentaire?

cssrelative
18
noobcode

Paul a raison. margin-top: -60px; au lieu de top: -60px;. Une autre solution possible consisterait à définir le "corps principal" sur position: relative;, puis à utiliser position: absolute; bottom: 60px; sur le pied de page - bien que cela signifie que le pied de page doit être déplacé à l'intérieur du "corps principal". bien que tant que le parent du pied de page coule avec "mainbody", vous pouvez utiliser cette même astuce sur cet élément à la place.

27
prodigitalson

L'espace «supplémentaire» en bas est l'espace que le pied de page prendrait. Les éléments relativement positionnés occupent toujours le même espace dans le flux de présentation de la page, même s’ils apparaissent ailleurs.

Vous pouvez essayer une marge inférieure négative sur votre corps principal. Vous constaterez peut-être que cela signifie que vous n'avez pas besoin de top: -60px; dans votre pied de page.

6
Paul D. Waite

Vous pouvez toujours utiliser:

position: relative;
top: -60px;

pour la section dont vous avez besoin, mais définissez

margin-top: -60px;

à la section qui apparaît ensuite. Dans ce cas - footer.

3
Mike Shema

Ce n'est pas vraiment une réponse directe à votre question, mais selon ce que vous voulez afficher derrière le contenu principal, vous pouvez peut-être simplement le simuler.

Si c'est une image, vous pouvez simplement la mettre dans html {} ou body {} (ou un div qui encapsule tout le contenu) et l'aligner au bas.

1
jeroen

Une façon d'y parvenir serait de placer la div dans une autre, absolute 'ly divisée de sorte qu'elle soit retirée du flux de documents.

1
raveren

une autre solution est la suivante:

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

top crée une marge supplémentaire et margin-bottom la supprime

pour une raison quelconque pour la balise h seulement cela a fonctionné pour moi. margin-top négatif ne fonctionne pas

0
Mantas Karanauskas