Verwenden Sie dann keine relative Positionierung. Das Element nimmt immer noch Platz ein, wo es ursprünglich war, als die relative Positionierung verwendet wurde, und das können Sie nicht loswerden. Sie können stattdessen stattdessen die absolute Positionierung verwenden oder die Elemente nebeneinander schweben lassen.
Ich habe ein bisschen mit dem Layout herumgespielt und schlage vor, dass Sie diese drei Regeln ändern in:
"und du kannst das nicht loswerden." - du kannst. Verwenden Sie einfach einen negativen Rand, wie in der Antwort des Plangs.
Michał K
5
@ MichałK: Nein, das bedeutet nur, dass Sie den leeren Raum mit einem anderen Element überlappen, nicht, dass Sie den leeren Raum loswerden. Sie können nur negative Ränder verwenden, um den leeren Raum von der relativen Positionierung mit der Größe des Elements zu überlappen.
Guffa
@ MichałK: Das Herunterstimmen dieser Antwort und anderer völlig unabhängiger Antworten hilft nicht, Sie können den durch die relative Positionierung verursachten Platz immer noch nicht loswerden.
Guffa
1
@ MichałK: Da Sie den Raum nur abdecken und nicht loswerden können, müssen Sie andere Elemente haben, die mindestens so groß sind wie der leere Raum, um ihn abzudecken. Wenn Sie beispielsweise einen leeren Raum von einem Element mit einer Höhe von 200 Pixel haben und nur ein Element mit einer Höhe von 100 Pixel haben, um das Loch abzudecken, haben Sie immer noch 100 Pixel von dem Loch übrig.
Guffa
1
Warum das Downvote? Wenn Sie nicht erklären, was Sie für falsch halten, kann dies die Antwort nicht verbessern.
Guffa
174
Ein weiterer Trick, der für mich gut funktioniert hat, ist die Verwendung eines negativen unteren Randes in dem relativen Element, das Sie verschoben haben. Keine Notwendigkeit, mit absoluter Positionierung zu gehen.
Dies ist die richtige Antwort, aber ich würde sagen, dass Sie mit der Polsterung wahrscheinlich besser dran sind, da sie leichter zu lesen und im Web standardisierter ist, um eine Polsterung zu haben.
Jeremy Battle
@ Jeremy Battle Auf jeden Fall sieht die Polsterung viel besser aus.
Alex
@Kir Sie können Ihren aktuellen Stil einfach so ändern, dass er aufgefüllt wird: 8px 16px 0px; um zu vermeiden, dass Ihr CSS eine zusätzliche Zeile enthält.
Jeremy Battle
Ich glaube, es ist der 300px-Raum unter dem Inhaltscontainer, der das Problem darstellt, nicht der Platz innerhalb des Containers ...
Guffa
Das Szenario erstellt eine anonyme Box innerhalb der div (#page) und gemäß der CSS-Spezifikation gibt es keine andere Möglichkeit, die anonyme Box direkt zu steuern, und diese anonyme Box erbt die Eigenschaft von ihrer übergeordneten Box (in diesem Fall #page). Es ist also besser, das übergeordnete div zu ändern, indem Sie seine Eigenschaft ändern, wie @alex sagt. Wenn das oben Gesagte die Kriterien nicht erfüllt, ist die Verwendung einer negativen Marge auch in diesem Szenario eine Lösung.
Rand oben mit negativem Wert anstelle von oben + Rand unten ist der
richtige
1
Ich hatte das gleiche Problem. Der negative Rand funktionierte bei mir nicht, da er einen massiven weißen Bereich hinterließ, in dem er sich früher befand. Ich habe dieses Problem in meinem Fall durch manuelle Eingabe der Höhe gelöst.
Meine Antwort ist spät, aber es kann anderen bei einem ähnlichen Problem helfen, das ich hatte.
Ich hatte eine <div>mit, position: relative;wo alle untergeordneten Elemente den position: absolute;Stil haben. Dies führte dazu , dass auf meiner Seite etwa 20 Pixel Leerraum angezeigt wurden .
Um dies zu umgehen, habe ich margin-top: -20px;das nächste Geschwisterelement nach dem <div>mit hinzugefügt position: relative;.
Wenn Sie zuvor ein Geschwisterelement haben, können Sie es verwenden margin-bottom: -20px;
section {height:200px;}
<h2>Extra Whitespace</h2><section><div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div><divstyle="position:relative;"><divstyle="position:relative;top:-20px;left:100px;">ABSOLUTE</div></div><div>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div></section><h2>No Whitespace margin-top</h2><section><div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div><divstyle="position:relative;"><divstyle="position:relative;top:-20px;left:100px;">ABSOLUTE</div></div><divstyle="margin-top:-20px;">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div></section><h2>No Whitespace margin-bottom</h2><section><divstyle="margin-bottom:-20px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div><divstyle="position:relative;"><divstyle="position:relative;top:-20px;left:100px;">ABSOLUTE</div></div><div>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div></section>
Ich konnte die Leerzeichen mit dem folgenden Framework entfernen:
Und hier ist das Markup
<divid="the-force-moved-element>I've been moved</div><divid="the-hack-part-1"><divid="the-hack-part-2>The quick brown fox jumps over the lazy dog</div></div><p>Lorem ipsum dolor sit amet...</p>
Diese Frage scheint gut beantwortet zu sein - jedoch hatten alle obigen Antworten schlimme Nebenwirkungen in meinem Layout. Das hat bei mir wirklich funktioniert:
.moveUp {position: relative;}.moveUp >*{position: absolute;width:100%;top:-75px;}/** This part is just design - ignore it ... ****/.box1,.box2,.box3 {height:100px;color: white;}.box1 {background: red;}.box2 {background: blue;height:50px;}.box3 {background: green;}
Antworten:
Verwenden Sie dann keine relative Positionierung. Das Element nimmt immer noch Platz ein, wo es ursprünglich war, als die relative Positionierung verwendet wurde, und das können Sie nicht loswerden. Sie können stattdessen stattdessen die absolute Positionierung verwenden oder die Elemente nebeneinander schweben lassen.
Ich habe ein bisschen mit dem Layout herumgespielt und schlage vor, dass Sie diese drei Regeln ändern in:
quelle
Ein weiterer Trick, der für mich gut funktioniert hat, ist die Verwendung eines negativen unteren Randes in dem relativen Element, das Sie verschoben haben. Keine Notwendigkeit, mit absoluter Positionierung zu gehen.
Etwas wie:
Ähnlich (wenn nicht identisch) zu der Lösung, die ich jetzt sehe, von grün.
quelle
margin-bottom
eine Minuszahl, weil Sie den zusätzlichen Platz unten entfernen möchten.quelle
quelle
Versuchen Sie diese Regel:
Ich habe die Position in absolut geändert, damit Sie die
bottom: 0
Eigenschaft verwenden können.quelle
Ich hatte ein ähnliches Problem. Der einfachste Weg ist, das Oberteil
margin-top
für zu ersetzen#page
.quelle
Ich hatte das gleiche Problem. Der negative Rand funktionierte bei mir nicht, da er einen massiven weißen Bereich hinterließ, in dem er sich früher befand. Ich habe dieses Problem in meinem Fall durch manuelle Eingabe der Höhe gelöst.
quelle
Meine Antwort ist spät, aber es kann anderen bei einem ähnlichen Problem helfen, das ich hatte.
Ich hatte eine
<div>
mit,position: relative;
wo alle untergeordneten Elemente denposition: absolute;
Stil haben. Dies führte dazu , dass auf meiner Seite etwa 20 Pixel Leerraum angezeigt wurden .Um dies zu umgehen, habe ich
margin-top: -20px;
das nächste Geschwisterelement nach dem<div>
mit hinzugefügtposition: relative;
.Wenn Sie zuvor ein Geschwisterelement haben, können Sie es verwenden
margin-bottom: -20px;
quelle
Ich konnte die Leerzeichen mit dem folgenden Framework entfernen:
Und hier ist das Markup
quelle
Diese Frage scheint gut beantwortet zu sein - jedoch hatten alle obigen Antworten schlimme Nebenwirkungen in meinem Layout. Das hat bei mir wirklich funktioniert:
quelle
Die beste Lösung, wenn Sie keine Leerzeichen darunter lassen möchten (relativ)
Ist Rand oben und Position zu verwenden: klebrig
quelle