Jak usunąć białe spacje, które pojawiają się po względnym umieszczeniu elementu w CSS

Question

Szukałem tego problemu w szerokim zakresie i ostatecznie znalazłem rozwiązanie na jakimś nieznanym forum na stronie # 10 w google. Rozwiązanie jest w odpowiedzi na:

Problem występuje w następujący sposób: Po względnym pozycjonowaniu elementu za pomocą CSS uzyskuję biały obszar, w którym element był ... Nie chcę białych znaków!

.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/

Jak widać na tym przykładzie, tylko spacje chcę to spacje spowodowane przez blok thetext o margines 50px; a odstępy przez stopę w kolorze białym (niebieski, aby był widoczny). Problem polega na tym, że biała spacja jest teraz zbyt duża, ponieważ "kup to" div nadal zajmuje miejsce po względnie ustawionym położeniu.

Jak rozwiązać ten problem?

Answer 1

Można to łatwo rozwiązać, stosując ujemny margines, który jest równy szerokości lub wysokości elementu.

Dla elementu o wysokości 100 pikseli, który znajduje się na górze, zastosujesz margines-dół: -100px;

Dla elementu o wysokości 100 pikseli, który znajduje się na dole, zastosujesz margin-top: -100px;

Dla elementu o szerokości 100 pikseli, który znajduje się po lewej stronie, zastosujesz margines prawy: -100px;

Dla elementu o szerokości 100 pikseli, który znajduje się po prawej stronie, zostanie zastosowany margines po lewej: -100px;

wycięte & wklejanie fragmentów css:

.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; 
    } 

I przerobiony przykład kod staje się wówczas:

.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

Oto przykład. W tym przypadku obiekt został przesunięty w prawo, a następnie w górę, przy użyciu ujemnej wartości górnej. Wyeliminowanie jego marginesowej przestrzeni marginesowej wymagało dodania równej wartości ujemnego marginesu.

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

Answer 3

Ustaw zewnętrzną div jako „position: relative” div chcesz przenieść jako „position: absolute” i ustawić górną i lewą wartości. to pozycjonuje element względem zewnętrznego div (a nie strony). pozycja względna pozostawia przerwy. Absolutnie nie.

Answer 4

ustaw wysokość na 0: height:0px;.

Teraz ten div można umieścić w dowolnym miejscu.

Answer 5

ustawić względny elememt góry do dominującego rozmiaru czcionki, jak ten kod:

HTML w szablonie jade:

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 

i 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; 

    } 

ten pracował dla mnie!

Answer 6

Możesz rozwiązać ten problem, podając wartość float: left before position: relative. Użyj właściwości margin-left, margin-top zamiast top, left.

Answer 7

Jeśli jesteś wystarczająco odważny, możesz umieścić overflow:hidden; i bottom negative margin na względnie pozycjonowanym elemencie, a to usunie resztki resztek :) tj. Na responsywnym miejscu.

Ale sprawdź, czy nie ukrywa potrzebnej zawartości.

Answer 8

To nie działa dla mnie, mając 4 oddzielne powiązane wzajemnie pozycje. nie mogłem dostać pracy, a nawet dodawanie i repozycjonowanie każdy:

Obecnie ten jest zoptymalizowany (patrz http://christ.eye-of-revelation.org/index.html 2 strona), ale we wszystkich przypadkach są one wykorzystywane w celu podkreślenia obszar obrazu zgodny z rozmiarem nośnika lub okna ...

Rozwiązanie było globalne i znacznie łatwiejsze; był również wykorzystywany do dwóch oddzielnych bloków do symulacji i zamiany dwóch stron: wszystkie problemy zostały rozwiązane, określając szerokość i wysokość obszaru, a po prostu ustawiając jego styl = "overflow: hidden;"

Mam nadzieję, że to pomoże.