Относительно позиционировать элемент, не занимая место в потоке документов

То, что вы пытаетесь сделать, звучит как абсолютное позиционирование. С другой стороны, вы можете, однако, сделать псевдоотносительный элемент, создав относительно позиционированный элемент нулевой ширины, нулевой высоты, по существу, исключительно с целью создания контрольной точки для положения, и абсолютно позиционированный элемент внутри этого:

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

Добавьте поле, равное пикселям, которые вы переместили:

Пример

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

Из небольшого чтения кажется, что вы можете абсолютно позиционировать элемент, пока родительский элемент позиционируется относительно. Это означает, что если у вас есть CSS:

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

Тогда дочерний элемент вообще не будет занимать место в потоке документов. Затем вы можете расположить его, используя одно из свойств «слева», «снизу» и т. д. Относительное позиционирование родителя обычно не должно влиять на него, потому что по умолчанию он будет расположен в исходном положении, если вы не укажете «слева», «снизу» и т. д.

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

Вы просто удаляете этот элемент из потока документа, устанавливая position: absolute, и оставляете его предельную точку свободно перемещаться с динамическим потоком содержимого, не указывая свойства стиля left top right и bottom, которые заставят его использовать относительная конечная точка потока динамически. Таким образом, абсолютно позиционированный элемент будет следовать за потоком документа, не занимая при этом место.

Никакие фиктивные обертки не нужны.

У @Bekim Bacaj был идеальный ответ для меня, хотя это может быть не совсем то, что искал ОП (хотя его вопрос оставляет место для интерпретации). При этом Беким не привел примера.

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

В приведенном выше примере создается элемент, который...

• использует чистый и простой CSS и ничего больше
• расположен вертикально, как если бы он был в потоке (настройка по умолчанию top)
• располагается горизонтально у правого края страницы (right: 0)
• не занимает места, но будет естественным образом перемещаться по мере прокрутки страницы (position: absolute)

Для меня данные решения не работали нормально. Я хочу видеть h3, затем текст и после этого Bootstrap-панели, вертикально синхронизированные с этими панелями, я хочу видеть другие панели с правой стороны,

Мне удалось это с помощью оболочки height:0 и после этого position: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>