Wie Leerzeichen zu entfernen, die nach der relativen Positionierung eines Elements mit CSS

Question

Ich habe weit und breit für dieses Problem gesucht und schließlich die Lösung auf einem obskuren Forum auf Seite 10 von Google gefunden. Die Lösung ist in der Antwort

Das Problem tritt auf: Nach der relativen Positionierung eines Elements mit CSS bekomme ich ein Leerzeichen, wo das Element war ... Ich will nicht das Leerzeichen!

.thetext 
 
    { 
 
     width:400px; 
 
     background:yellow; 
 
     border: 1px dashed red; 
 
     margin:50px; 
 
     padding:5px; 
 
     font-weight:bold; 
 
    } 
 
    .whiteblob 
 
    { 
 
     position:relative; 
 
     top:-140px; 
 
     left:70px; 
 
     width:200px; 
 
     height:50px; 
 
     border: 4px solid green; 
 
     background:white; 
 
     font-size:2.5em; 
 
     color:red; 
 
     
 
    } 
 
    .footerallowedwhitespaceinblue 
 
    { 
 
     height:10px; 
 
     background-color:blue; 
 
    } 
 
    .footer 
 
    { 
 
     background-color:grey; 
 
     height:200px; 
 
    }

<div class="thetext"><script type="text/javascript">for(c=0;c<50;c++){document.write("Lorem ipsum dolor est, ");}</script> 
 
    </div> 
 
    <div class="whiteblob"> 
 
     &nbsp;buy this! 
 
    </div> 
 
    <div class="footerallowedwhitespaceinblue"> 
 
    </div> 
 
    <div class="footer"> 
 
     The whitespace above is way to big! The buy this still takes up space whilst it is moved. 
 
    </div>

JSFiddle: http://jsfiddle.net/qqXQn/

Wie Sie im Beispiel sehen können, die nur Leerzeichen ich will, ist das Leerzeichen durch den theText Block durch den Rand von 50px verursacht; und der Abstand durch den blauen Bereich in Blau (blau gemacht, damit er sichtbar ist). Das Problem ist ... das Leerzeichen ist jetzt zu groß, weil das "buy this" div immer noch Platz einnimmt, nachdem es relativ positioniert wurde.

Wie löse ich das?

Answer 1

Sie können dies einfach lösen, indem Sie einen negativen Rand anwenden, der der Breite oder Höhe des Elements entspricht.

Für ein Element mit einer Höhe von 100px, das oben positioniert ist, wird der untere Rand angewendet: -100px;

Für ein Element von 100px Höhe, das an der Unterseite positioniert ist, wenden Sie margin-top an: -100px;

Für ein Element mit einer Breite von 100px, das auf der linken Seite positioniert ist, wird der Rand rechts angewendet: -100px;

Für ein Element mit einer Breite von 100px, das auf der rechten Seite positioniert ist, wird der Rand links angewendet: -100px;

Schnitt & CSS-Schnipsel Paste:

.top 
    { 
    postion:relative; 
    top:-100px; 
    height:25px; 
    margin-bottom:-25px; 
    } 
.bottom 
    { 
    postion:relative; 
    top:100px; 
    height:25px; 
    margin-top:-25px; 
    } 
.left 
    { 
    postion:relative; 
    left:-100px; 
    width:25px; 
    margin-right:-25px; 
    } 
.right 
    { 
    postion:relative; 
    left:100px; 
    width:25px; 
    margin-left:-25px; 
    } 

Und das überarbeitete Beispielcode wird dann:

.thetext 
 
{ 
 
    width:400px; 
 
    background:yellow; 
 
    border: 1px dashed red; 
 
    margin:50px; 
 
    padding:5px; 
 
    font-weight:bold; 
 
} 
 
.whiteblob 
 
{ 
 
    position:relative; 
 
    top:-140px; 
 
    left:70px; 
 
    width:200px; 
 
    height:50px; 
 
    margin-bottom:-50px; 
 
    border: 4px solid green; 
 
    background:white; 
 
    font-size:2.5em; 
 
    color:red; 
 
    
 
} 
 
.footerallowedwhitespaceinblue 
 
{ 
 
    height:10px; 
 
    background-color:blue; 
 
} 
 
.footer 
 
{ 
 
    background-color:grey; 
 
    height:200px; 
 
}

<div class="thetext"><script type="text/javascript">for(c=0;c<50;c++){document.write("Lorem ipsum dolor est, ");}</script> 
 
</div> 
 
<div class="whiteblob"> 
 
    &nbsp;buy this! 
 
</div> 
 
<div class="footerallowedwhitespaceinblue"> 
 
</div> 
 
<div class="footer"> 
 
</div>

http://jsfiddle.net/qqXQn/1/

Answer 2

Hier ein ist Beispiel. In diesem Fall wurde das Objekt mit einem negativen oberen Wert nach rechts und dann nach oben verschoben. Um den Nachmargraum zu eliminieren, musste ein gleicher Wert für die negative Margin hinzugefügt werden.

position:relative; 
width:310px; 
height:260px; 
top:-332px; 
margin-bottom:-332px; 
left:538px; 

Answer 3

Legen Sie das äußere Div als "position: relative" das Div fest, das Sie als "position: absolute" verschieben möchten, und legen Sie die oberen und linken Werte fest. Dadurch wird das Element relativ zum äußeren Teil positioniert (nicht auf der Seite). relative Position lässt Lücken entstehen. absolut nicht.

Answer 4

Höhe auf 0 setzen: height:0px;.

Jetzt kann dieses div überall platziert werden.

Answer 5

relativ Elememt oben nach Mutterschriftgröße wie dieser Code gesetzt:

html in Jade Vorlage:

div.dialog(id='login') 
     div.dialog-header 
      span.title login 
      a.dialog-close(href="") X 
      hr 
     div.dialog-body 
      p hello this is body 
      hr 
     div.dialog-footer 
      p this is footer 

und CSS:

.dialog 
    { 
     height: 100%; 
     position: absolute; 
     top: -100%; 
     right: 50%; 
     left: 50%; 
     bottom: 100%; 
     border: 2px solid rgba(255, 255, 255,1); 
     border-radius: 3px; 
     font-size: 14px; 

    } 
.dialog-body{ 
     position: relative; 
     background-color: #F99; 
     height: 80%; 
     top: -14px; 
    } 
    .dialog-header{ 
     position: relative; 
     height: 10%; 
     background-color: #F9F9F9; 

    } 
    .dialog-footer{ 
     position: relative; 
     height: 10%; 
     top: -28px; 
     background-color: #F9fdf9; 

    } 

dies für mich gearbeitet!

Answer 6

Sie können dieses Problem lösen, indem Sie float geben: links vor Position: relativ. Verwenden Sie die Eigenschaften "Rand links" und "Rand oben" anstelle von oben und links.

Answer 7

Wenn Sie mutig genug sind, können Sie overflow:hidden; und eine bottom negative margin auf relativ positionierte Element setzen, und es wird das Leerzeichen übrig :) entfernt, d. H. Auf responsive Website.

Aber überprüfen Sie, dass es einen benötigten Inhalt nicht versteckt.

Answer 8

Dies funktionierte nicht für mich, mit 4 voneinander durch die relativen Positionen miteinander verknüpft. Ich konnte es nicht funktioniert, auch das Hinzufügen und Neupositionierung jeder:

Derzeit diese optimiert ist (http://christ.eye-of-revelation.org/index.html 2. Seite), aber in allen Fällen sie zu Highlight verwendet werden ein Bereich des Bildes entsprechend der Medien- oder Fenstergröße ...

Die Lösung war global und viel einfacher; Es wurde auch für zwei separate Blöcke verwendet, um die beiden Seiten zu simulieren und zu vertauschen: alle Probleme werden gelöst, indem ein Bereich in Breite und Höhe definiert wird und nur der Stil eingestellt wird: "overflow: hidden";

Hoffe, das kann helfen.