Względnie pozycjonować element bez zajmowania przez niego miejsca w obiegu dokumentów

Dodaj margines równy przesuniętym pikselom:

Przykład

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

Z lektury wynika, że można bezwzględnie pozycjonować element tak długo, jak element nadrzędny jest względnie pozycjonowany. Oznacza to, że jeśli masz CSS:

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

Wtedy element potomny nie zajmie żadnego miejsca w obiegu dokumentu. Następnie można go ustawić za pomocą jednej z właściwości "left"," bottom", itd. Położenie względne na rodzicu zwykle nie powinno mieć na to wpływu, ponieważ będzie domyślnie ustawione w pierwotnej pozycji, jeśli nie podasz "lewy"," dolny " itp.

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

Po prostu usuwasz ten element z przepływu dokumentu, ustawiając position: absolute, i zostawiasz jego punkt przerwania poruszając się swobodnie z dynamicznym przepływem treści przez , a nie określając właściwości stylu left top right i bottom, które będą zmuszać go do dynamicznego używania względnego punktu końcowego przepływu. W ten sposób absolutnie pozycjonowany element będzie podążał za przepływem dokumentu, usuwając się z zajmowania przestrzeni.

Nie są potrzebne żadne manekiny.

Dla mnie podane rozwiązania nie działały dobrze. I want to see a h3, than text and after that Bootstrap-panels, vertical-synchronous to this panels I want to see other panels on the right side,

Udało mi się to z wysokością: 0, a po tej pozycji: relative;left: 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 miał dla mnie idealną odpowiedź, chociaż może nie jest to dokładnie to, czego szukał OP (choć jego pytanie pozostawia miejsce na interpretację). To powiedziawszy, Bekim nie dał 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 ustawia element, który..

• używa czystego i prostego CSS i nic więcej
• jest ustawiona pionowo tak, jakby znajdowała się w przepływie (domyślne ustawienie top)
• znajduje się poziomo przy prawej krawędzi strony (right: 0)
• nie zajmuje miejsca, ale będzie poruszać się naturalnie w miarę przewijania strony(position: absolute)