CSS utilisant un problème de positionnement relatif négatif
j'ai un en-tête, mainbody et pied de page. L'en-tête et le corps principal sont bien coiffés. Maintenant pour le pied de page je veux le faire apparaître derrière mainbody, donc j'ai utilisé:
z-index: -1;
position: relative;
top: -60px;
cela donne le résultat désiré, mais j'obtiens un espace supplémentaire de 60px en bas.
Comment puis-je libérer cet espace supplémentaire?
6 réponses
Paul a raison. margin-top: -60px; au lieu de top: -60px;. Une autre solution possible serait de définir la "mainbody"position: relative; 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 de "mainbody". bien que tant que le parent du pied de page coule avec "mainbody" vous pouvez utiliser ce même truc sur cet élément à la place.
l'espace "supplémentaire" en bas est l'espace que prendrait le pied de page. Les éléments relativement positionnés occupent toujours le même espace dans le flux de mise en page de la page, même s'ils apparaissent ailleurs.
Vous pouvez essayer une marge de fond négative sur votre corps principal. Vous pouvez trouver cela signifie que vous n'avez pas besoin d' top: -60px; sur votre pied de page.
Vous pouvez toujours utiliser:
position: relative;
top: -60px;
pour la section dont vous avez besoin mais
margin-top: -60px;
à la section qui apparaît ensuite. Dans ce cas - pied de page.
Un moyen d'y parvenir serait de mettre la div à l'intérieur de l'autre, absolute'ly positionné div de sorte qu'il est sorti du flux de documents.
Pas vraiment une réponse directe à votre question, mais en fonction de ce que vous souhaitez afficher derrière le contenu principal, vous pouvez peut-être tout simplement faux.
Si c'est une image, vous pouvez simplement le mettre dans html {} ou body {} (ou un div qui englobe tout le contenu) et d'aligner le bas.
une autre solution est la suivante:
z-index: -1;
position: relative;
top: -60px;
margin-bottom: -60px;
le haut crée la marge supplémentaire et la marge-le bas la supprime
pour une raison quelconque pour h balise que cela a fonctionné pour moi. marge négative-dessus ne fonctionne pas