Posicione de forma relativa um elemento sem ocupar espaço no fluxo de documentos

Como posso posicionar relativamente um elemento e não ocupar espaço no fluxo de documentos?

O que você está tentando fazer parece um posicionamento absoluto. Por outro lado, você pode, no entanto, criar um elemento pseudo-relativo, criando um elemento relativamente posicionado com largura zero, altura zero, essencialmente apenas com a finalidade de criar um ponto de referência para a posição e um elemento absolutamente posicionado dentro disso:

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

Adicione uma margem igual aos pixels que você moveu:

Exemplo

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

Ao ler um pouco, parece que você pode posicionar um elemento em absoluto, desde que o elemento pai esteja relativamente posicionado. Isso significa que se você tiver o CSS:

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

O elemento filho não ocupará nenhum espaço no fluxo do documento. Você pode posicioná-lo usando uma das propriedades "esquerda", "inferior", etc. O posicionamento relativo no pai geralmente não deve afetá-lo, porque ele será posicionado na sua posição original por padrão se você não especificar "left", "bottom" etc.

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

Você simplesmente retira esse elemento do fluxo do documento, definindo position: absolutee deixando seu ponto de interrupção se mover livremente com o fluxo dinâmico do conteúdo, não especificando as propriedades de estilo left top righte bottomque o forçarão a usar o ponto de extremidade relativo do fluxo dinamicamente. Dessa forma, o elemento absolutamente posicionado seguirá o fluxo do documento e evita que ocupe o espaço.

Não são necessários invólucros fictícios.

Para mim, as soluções dadas não funcionaram bem. Eu quero ver um h3, que o texto e, depois disso, painéis de inicialização, sincronizados verticalmente com esses painéis, eu quero ver outros painéis no lado direito,

Eu consegui isso com uma altura: 0 wrapper e depois dessa posição: relativa; esquerda: 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 tinha a resposta perfeita para mim, mesmo que não seja exatamente o que o OP estava procurando (embora sua pergunta deixe espaço para interpretação). Dito isto, Bekim não forneceu um exemplo.

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

O exemplo acima configura um elemento que ...

• usa CSS puro e simples e nada mais
• está posicionado verticalmente como se estivesse no fluxo ( topconfiguração padrão )
• está posicionado horizontalmente na borda direita da página ( right: 0)
• não ocupa espaço, mas se move naturalmente à medida que a página rola ( position: absolute)