Posizionare relativamente un elemento senza che occupi spazio nel flusso del documento

Come posso posizionare relativamente un elemento e non occupare spazio nel flusso del documento?

Quello che stai cercando di fare sembra un posizionamento assoluto. D'altra parte, è possibile, tuttavia, creare un elemento pseudo-relativo, creando un elemento a larghezza zero, altezza zero, relativamente posizionato, essenzialmente al solo scopo di creare un punto di riferimento per la posizione e un elemento assolutamente posizionato all'interno di quello:

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

Aggiungi un margine uguale ai pixel che hai spostato:

Esempio

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

Dalla lettura di un po ', sembra che tu possa posizionare un elemento in modo assoluto purché l'elemento genitore sia posizionato relativamente. Ciò significa che se hai il CSS:

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

Quindi l'elemento figlio non occuperà affatto spazio nel flusso del documento. È quindi possibile posizionarlo utilizzando una delle proprietà "left", "bottom", ecc. Il posizionamento relativo sul genitore di solito non dovrebbe influenzarlo perché verrà posizionato nella sua posizione originale per impostazione predefinita se non si specifica "sinistra", "in basso", ecc.

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

Basta semplicemente togliere quell'elemento dal flusso del documento impostandolo position: absolutee lasciare che il suo punto di interruzione si muova liberamente con il flusso dinamico del contenuto non specificando le proprietà left top righte lo bottomstile che lo costringeranno a usare dinamicamente l'endpoint relativo del flusso. In questo modo l'elemento posizionato in modo assoluto seguirà il flusso del documento rimuovendo se stesso dallo spazio occupato.

Non sono necessari involucri fittizi.

Per me le soluzioni fornite non hanno funzionato bene. Voglio vedere un h3, che testo e dopo che i pannelli Bootstrap, verticali sincroni con questi pannelli, voglio vedere altri pannelli sul lato destro,

L'ho gestito con un'altezza: 0 wrapper e dopo quella posizione: relativa; a sinistra: 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 ha avuto la risposta perfetta per me, anche se potrebbe non essere esattamente quello che l'OP stava cercando (anche se la sua domanda lascia spazio all'interpretazione). Detto questo, Bekim non ha fornito un esempio.

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

L'esempio sopra imposta un elemento che ...

• usa CSS puro e semplice e nient'altro
• è posizionato verticalmente come se fosse nel flusso ( topimpostazione predefinita )
• è posizionato orizzontalmente sul bordo destro della pagina ( right: 0)
• non occupa spazio, ma si sposterà naturalmente mentre la pagina scorre ( position: absolute)