Posicione relativamente un elemento sin que ocupe espacio en el flujo de documentos

186

¿Cómo puedo posicionar relativamente un elemento y no ocupar espacio en el flujo de documentos?

Diseñador web
fuente
2
¿Necesita estar relativamente posicionado? Los elementos posicionados de forma absoluta se eliminan del flujo de documentos.
Jason Gennaro

Respuestas:

281

Lo que intentas hacer suena como posicionamiento absoluto. Por otro lado, puede, sin embargo, hacer un elemento pseudo-relativo, creando un elemento de ancho relativo, altura cero, relativamente posicionado, esencialmente con el único propósito de crear un punto de referencia para la posición, y un elemento absolutamente posicionado dentro de eso:

<div style="position: relative; width: 0; height: 0">
    <div style="position: absolute; left: 100px; top: 100px">
        Hi there, I'm 100px offset from where I ought to be, from the top and left.
    </div>
</div>
Nightfirecat
fuente
¿Cómo heredarías el ancho en este caso? como el ancho relativo del div es 0, el div absoluto no podría heredar el ancho correctamente si ambos están en un contenedor
Alex H
@AlexH Desafortunadamente, este método no ofrece una manera de hacerlo. Aconsejaría intentar el método de posición negativa / margen negativo de FredK en este caso.
Nightfirecat
101

Agregue un margen igual a los píxeles que movió:

Ejemplo

.box {
    position: relative;
    top: -30px; 
    margin-bottom: -30px;
}
Fred K
fuente
55
de alguna manera tiene más sentido para mí que la otra respuesta
markasoftware 03 de
2
¿Esto funciona? Lo estoy intentando en Chrome y no parece funcionar. Lo estoy usando para posicionar los botones de navegación desde slidesjs, de modo que también pueda estar jugando.
Petruza
1
Intenté esto con left: -25px; margin-right: -25px;y todavía compensa los elementos hermanos horizontalmente en 2-3 píxeles por alguna razón.
Mike
Incluya el uso de float:right;cuándo desea hacer esto en relación con el lado derecho de la pantalla para que los valores de derecha o izquierda puedan ser más pequeños y más manejables.
Damian Green
tenga en cuenta los top:valores positivos que debe tener margin-bottom:igual al menos de la altura del elemento, no el desplazamiento
Sr. Heelis
21

Al leer un poco, parece que puede posicionar un elemento absoluto siempre que el elemento padre esté relativamente posicionado. Eso significa que si tienes el CSS:

.parent { 
    position: relative; 
}
.parent > .child {
    position: absolute;
}

Entonces el elemento hijo no ocupará ningún espacio en el flujo de documentos. Luego puede colocarlo utilizando una de las propiedades "izquierda", "inferior", etc. El posicionamiento relativo en el padre generalmente no debería afectarlo porque se colocará en su posición original de forma predeterminada si no especifica "izquierda", "abajo", etc.

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

jeteon
fuente
3

Simplemente quite ese elemento del flujo del documento estableciendo position: absolute, y deje que su punto de ruptura se mueva libremente con el flujo dinámico de contenido al no especificar las propiedades de estilo left top righty bottomque lo obligarán a usar dinámicamente el punto final relativo del flujo. De esta manera, el elemento en posición absoluta seguirá el flujo del documento mientras se elimina de ocupar el espacio.

No se necesitan envolturas ficticias.

Bekim Bacaj
fuente
un código de ejemplo simple podría ayudar mucho más en lugar de leer y comprender todo el paragrah. Aunque el concepto es claro
MR_AMDEV
0

Para mí, las soluciones dadas no funcionaron bien. Quiero ver un h3, que texto y después de eso Bootstrap-paneles, vertical-sincrónico a estos paneles, quiero ver otros paneles en el lado derecho,

Logré esto con una altura: 0 envoltorio y después de esa posición: relativo; izquierda: 100%.

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">

    <div class="row">
        <div class="col-md-9">
            <div class="col-md-12">
                <h3> hello </h3>
            </div>
            <div class="col-md-12">
                <span> whats up? </span>
            </div>
            <div style="height:0" class="col-md-12">
                <div style="left:100%" class="col-md-3">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">Panel title</h3>
                        </div>
                        <div class="panel-body">
                            <p>Panel Body</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Panel title</h3>
                    </div>
                    <div class="panel-body">
                        <p>Panel Body</p>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Panel2 title</h3>
                    </div>
                    <div class="panel-body">
                        <p>Panel Body</p>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-md-3">
            <!--placeholder-->
        </div>

    </div>
</div>

Reiner
fuente
0

@Bekim Bacaj tenía la respuesta perfecta para mí, aunque puede que no sea exactamente lo que estaba buscando el OP (aunque su pregunta deja margen para la interpretación). Dicho esto, Bekim no dio un ejemplo.

<h1>Beneath this...</h1>
<style>
    .HoverRight {
        background: yellow;
        position: absolute;
        right: 0;
    }
</style>
<div class="HoverRight">Stuff and Things!</div>
<p>but, top = same as this paragraph.</p>

El ejemplo anterior establece un elemento que ...

  • usa CSS puro y simple y nada más
  • se coloca verticalmente como si estuviera en el flujo ( topconfiguración predeterminada )
  • se coloca horizontalmente en el borde derecho de la página ( right: 0)
  • no ocupa espacio, pero se moverá naturalmente a medida que la página se desplaza ( position: absolute)
John T.
fuente