Relatywnie pozycjonuj element bez zajmowania miejsca w przepływie dokumentów

Jak mogę względnie ustawić element tak, aby nie zajmował miejsca w obiegu dokumentów?

To, co próbujesz zrobić, brzmi jak pozycjonowanie absolutne. Z drugiej strony możesz jednak utworzyć element pseudo-względny, tworząc element pozycjonowany względnie o zerowej szerokości i zerowej wysokości, zasadniczo wyłącznie w celu utworzenia punktu odniesienia dla pozycji i elementu pozycjonowanego absolutnie w tym:

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

Dodaj margines równy przesuniętym pikselom:

Przykład

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

Czytając trochę, wydaje się, że można bezwzględnie pozycjonować element, o ile element nadrzędny jest ustawiony względnie. Oznacza to, że jeśli masz CSS:

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

Wtedy element potomny nie zajmie w ogóle miejsca w przepływie dokumentu. Następnie możesz go ustawić za pomocą jednej z właściwości „left”, „bottom” itp. Względne pozycjonowanie na rodzica zwykle nie powinno mieć na to wpływu, ponieważ zostanie domyślnie ustawione w pierwotnym położeniu, jeśli nie określisz „lewo”, „dół” itp.

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

Po prostu usuwasz ten element z przepływu dokumentu przez ustawienie position: absolutei pozostawiasz jego punkt przerwania poruszający się swobodnie wraz z dynamicznym przepływem treści, nie określając właściwości left top righti bottomstylu, które będą zmuszać go do dynamicznego używania względnego punktu końcowego przepływu. W ten sposób element pozycjonowany absolutnie będzie podążał za obiegiem dokumentu, jednocześnie usuwając się z zajmowanego miejsca.

Nie są potrzebne żadne atrapy.

U mnie podane rozwiązania nie sprawdziły się. Chcę zobaczyć h3, niż tekst, a potem panele Bootstrap, zsynchronizowane pionowo z tymi panelami, chcę zobaczyć inne panele po prawej stronie,

Udało mi się to z opakowaniem wysokości: 0 i po tej pozycji: względna; po lewej: 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 udzielił mi idealnej odpowiedzi, mimo że może nie być dokładnie tym, czego szukał OP (chociaż jego pytanie pozostawia miejsce na interpretację). Mimo to Bekim nie podał przykładu.

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

Powyższy przykład konfiguruje element, który ...

• używa czystego i prostego CSS i niczego więcej
• jest ustawiony pionowo, tak jakby znajdował się w strumieniu ( topustawienie domyślne )
• jest umieszczony poziomo przy prawej krawędzi strony ( right: 0)
• nie zajmuje miejsca, ale porusza się naturalnie w miarę przewijania strony ( position: absolute)