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

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

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>

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

Ejemplo

.box {
    position: relative;
    top: -30px; 
    margin-bottom: -30px;
}

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/

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.

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>

@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)