Pregunta Cómo eliminar el espacio en blanco que aparece después del posicionamiento relativo de un elemento con CSS


He estado buscando este problema por todas partes y finalmente encontré la solución en algún foro oscuro en la página 10 de google. La solución está en la respuesta

El problema ocurre es el siguiente: Después del posicionamiento relativo de un elemento con CSS obtengo un espacio en blanco de donde estaba el elemento ... ¡No quiero el espacio en blanco!

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

Como puede ver en el ejemplo, el único espacio en blanco que quiero es el espacio en blanco causado por el bloque de texto por el margen de 50px; y el espaciado por el footeralblanco blanco en azul (hecho azul para que sea visible). El problema es ... el espacio en blanco es demasiado grande ahora porque el div de "comprar esto" todavía ocupa espacio después de que ha sido relativamente posicionado.

¿Cómo puedo solucionar esto?


32
2017-12-05 11:19


origen


Respuestas:


Simplemente puede resolver esto aplicando un margen negativo que es igual al ancho o alto del elemento.

Para un elemento de 100px de altura que se coloca en la parte superior, se aplicará el margen inferior: -100px;

Para un elemento de 100px de altura que está posicionado en la parte inferior, aplicará margin-top: -100px;

Para un elemento de 100px de ancho que se coloca a la izquierda, se aplicará margen-derecha: -100px;

Para un elemento de 100px de ancho que se coloca a la derecha, aplicará margin-left: -100px;

cortar y pegar fragmentos 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;
    }

Y el código de ejemplo reelaborado se convierte en:

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


44
2017-12-05 11:19



Aquí hay un ejemplo. En este caso, el objeto se movió hacia la derecha y luego hacia arriba con un valor superior negativo. La eliminación de su espacio de margen final requiere agregar un valor de margen negativo igual.

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

3
2018-01-12 07:12



Puedes resolver este problema dando float: left before position: relative. Use las propiedades margin-left, margin-top en vez de top, left también.


2
2018-04-20 07:57



Si eres lo suficientemente valiente, puedes poner overflow:hidden; y un bottom negative margin en un elemento relativamente posicionado, y eliminará los restos de espaciado :) es decir, en el sitio receptivo.

Pero compruebe que no oculta un contenido necesario.


2
2018-05-04 04:14



Establezca la parte superior de elememt relativa al tamaño de fuente principal como este código:

html en plantilla de 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

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

    }

esto funcionó para mí!


0
2018-03-25 21:57



Establezca el div externo como "posición: relativa" al div que desea mover como "posición: absoluta" y configure los valores superior e izquierdo. esto posicionará el artículo en relación con el div externo (no la página). posición relativa deja huecos. absoluto no.


-1
2017-12-04 00:46



Esto no funcionó para mí, teniendo 4 puntos separados entrelazados por las posiciones relativas de cada uno. No pude hacerlo funcionar, incluso agregué y reposicioné cada uno:

Actualmente, esto está optimizado (ver http://christ.eye-of-revelation.org/index.html 2da página) pero en todos los casos se usan para resaltar un área de la imagen de acuerdo con el medio o el tamaño de la ventana ...

La solución fue global y mucho más fácil; también se usó para dos bloques separados para simular e intercambiar las dos páginas: todos los problemas se resuelven definiendo en ancho y alto un área, y simplemente configurando su estilo = "overflow: hidden;"

Espero que esto pueda ayudar.


-1
2018-05-16 13:39



establecer la altura en 0: height:0px;.

Ahora este div se puede colocar en cualquier lugar.


-2
2018-03-02 18:47