CSS negative relative Positionierung Ausgabe
https://stackoverflow.com/questions/2280625
-
21-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
habe ich einen Header und Footer Hauptkörper. Kopf- und main richtig gestylt. Jetzt für Fußzeile will ich es hinter main erscheinen, so dass ich verwendet:
z-index: -1;
position: relative;
top: -60px;
Das gibt das gewünschte Ergebnis, aber ich bekomme einen zusätzlichen Raum von 60px am unteren Ende.
Wie kann ich diesen zusätzlichen Raum?
Lösung
Paul ist richtig. margin-top: -60px; statt top: -60px;. Eine andere mögliche Lösung wäre es, die „mainbody“ auf position: relative; setzen dann zu verwenden position: absolute; bottom: 60px; auf der Fußzeile - obwohl dies woild die Fußzeile Bedürfnisse bedeuten inside „mainbody“ bewegt werden. obwohl, solange die Eltern der Fußzeile mit „mainbody“ fließt Sie diesen gleichen Trick stattdessen auf dieses Element nutzen könnten.
Andere Tipps
Der „Extra“ Platz an der Unterseite ist der Raum, dass die Fußzeile würde Aufnahme. Relativ noch positionierten Elemente den gleichen Platz in der Seite Layout Fluss aufzunehmen, auch wenn sie woanders sind erscheinen.
Sie könnten versuchen, einen negativen unteren Rand auf dem Hauptkörper. Sie können diese Mittel finden Sie nicht top: -60px; auf Ihrer Fußzeile müssen.
Sie können weiterhin verwendet werden:
position: relative;
top: -60px;
für den Abschnitt, den Sie brauchen, aber Satz
margin-top: -60px;
Abschnitt, der erscheint nächste. In diesem Fall -. Fußzeile
Eine Möglichkeit, das zu erreichen wäre, die div in einer anderen zu setzen, absolute'ly positioniert div, so dass sie von den Belegfluss herausgenommen wird.
Nicht wirklich eine direkte Antwort auf Ihre Frage, aber je nachdem, was Sie wollen hinter dem Hauptinhalt angezeigt werden, können Sie vielleicht einfach fälschen.
Wenn Es ist ein Bild, können Sie einfach es ausdrückte in html {} oder body {} (oder ein div, dass alle Inhalte kapselt) und richten Sie sie nach unten.
Eine andere Lösung hierfür lautet:
z-index: -1;
position: relative;
top: -60px;
margin-bottom: -60px;
nach oben schafft zusätzliche Marge und margin-bottom entfernt es
aus irgendeinem Grunde für h-Tag nur für mich gearbeitet. negative margin-top funktioniert nicht
