Відносно розташуйте елемент, не займаючи місця в документообігу

Як я можу відносно розмістити елемент і чи він не займе місця в документообігу?

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

<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стилі, які змусять його динамічно використовувати відносну кінцеву точку потоку. Таким чином абсолютно розміщений елемент буде стежити за документообігом, видаляючи себе, займаючи простір.

Не потрібні фальшиві обгортки.

Для мене дані рішення не спрацювали нормально. Я хочу бачити 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>

@ Беким Бачай мав ідеальну відповідь для мене, хоча це може бути не саме те, що шукала ОП (хоча його питання залишає місце для тлумачення). Незважаючи на це, Бекім не наводив прикладу.

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