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

Как я могу относительно позиционировать элемент, и чтобы он не занимал место в потоке документов?

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

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

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

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

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

Никакие пустышки не нужны.

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

Мне удалось это с оберткой высоты: 0 и после этого положения: относительная; слева: 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 был идеальный ответ для меня, хотя это может быть не совсем то, что искал ОП (хотя его вопрос оставляет место для интерпретации). При этом Беким не привел пример.

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