web-dev-qa-db-fra.com

Comment supprimer les espaces qui apparaissent après le positionnement relatif d'un élément avec CSS

J'ai cherché ce problème de loin et j'ai finalement trouvé la solution sur un forum obscur sur la page # 10 de Google. La solution est dans la réponse

Le problème se produit est le suivant: Après avoir positionné un élément avec CSS, j'obtiens un espace où se trouvait l'élément ... Je ne veux pas d'espace!

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

Comme vous pouvez le voir dans l'exemple, le seul espace que je veux est l'espace provoqué par le bloc de texte par la marge de 50px; et l'espacement par le bas de la page espace blanc en bleu (rendu bleu pour qu'il soit visible). Le problème est ... l'espace blanc est trop grand maintenant parce que le div "buy this" prend toujours de la place après qu'il soit relativement positionné.

Comment résoudre ce problème?

csslayoutwhitespace
35
Tschallacka

Vous pouvez simplement résoudre ce problème en appliquant une marge négative égale à la largeur ou à la hauteur de l'élément.

Pour un élément d'une hauteur de 100 pixels positionné en haut, vous appliquerez margin-bottom: -100px;

Pour un élément d'une hauteur de 100 pixels positionné vers le bas, vous appliquerez margin-top: -100px;

Pour un élément de largeur 100px positionné à gauche, vous appliquerez margin-right: -100px;

Pour un élément d'une largeur de 100 pixels positionné à droite, vous appliquerez margin-left: -100px;

couper et coller des extraits de 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;
    }

Et l'exemple de code retravaillé devient alors:

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

45
Tschallacka

Si vous êtes assez courageux, vous pouvez mettre overflow:hidden; et un bottom negative margin sur l'élément relativement positionné, et cela supprimera l'espacement restant :) c'est-à-dire sur le site réactif.

Mais vérifiez qu'il ne cache pas un contenu nécessaire.

3
Iggy

Voici un exemple. Dans ce cas, l'objet a été déplacé vers la droite puis vers le haut à l'aide d'une valeur supérieure négative. L'élimination de son espace de marge arrière a nécessité l'ajout d'une valeur de marge négative égale.

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

Vous pouvez résoudre ce problème en donnant float: left before position: relative. Utilisez les propriétés margin-left, margin-top au lieu de top, left also.

2
ibsenv

définissez relatif elememt top à la taille de police parent comme ce code:

html dans le modèle 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

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

    }

cela a fonctionné pour moi!

0
Ali mohammadi