Posisikan elemen secara relatif tanpa mengambil ruang dalam aliran dokumen

Bagaimana saya bisa memposisikan sebuah elemen secara relatif, dan membuatnya tidak menghabiskan ruang dalam aliran dokumen?

Apa yang Anda coba lakukan terdengar seperti penentuan posisi absolut. Di sisi lain, Anda dapat, bagaimanapun, membuat elemen pseudo-relatif, dengan membuat elemen nol-lebar, tinggi-nol, relatif diposisikan, pada dasarnya semata-mata dengan tujuan menciptakan titik referensi untuk posisi, dan elemen yang diposisikan benar-benar dalam hal itu:

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

Tambahkan margin sama dengan piksel yang Anda pindahkan:

Contoh

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

Dari membaca sedikit, tampaknya Anda dapat memposisikan elemen secara absolut selama elemen induk relatif diposisikan. Itu berarti jika Anda memiliki CSS:

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

Maka elemen anak tidak akan mengambil ruang dalam aliran dokumen sama sekali. Anda kemudian dapat memposisikannya menggunakan salah satu properti "kiri", "bawah", dll. Penentuan posisi relatif pada induk biasanya tidak memengaruhi karena akan diposisikan pada posisi semula secara default jika Anda tidak menentukan "kiri", "bawah", dll.

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

Anda cukup mengambil elemen itu dari aliran dokumen dengan menetapkan position: absolute, dan membiarkannya melanggar titik bergerak bebas dengan aliran konten yang dinamis dengan tidak menentukan left top rightdan bottomgaya properti yang akan memaksanya untuk menggunakan titik akhir relatif dari aliran secara dinamis. Dengan cara ini elemen yang benar-benar diposisikan akan mengikuti aliran dokumen sambil menghilangkan dirinya dari mengambil ruang.

Tidak diperlukan pembungkus dummy.

Bagi saya solusi yang diberikan tidak bekerja dengan baik. Saya ingin melihat h3, daripada teks dan setelah itu Bootstrap-panel, vertikal-sinkron ke panel ini saya ingin melihat panel lain di sisi kanan,

Saya mengatur ini dengan tinggi: 0 pembungkus dan setelah posisi itu: relatif; kiri: 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 memiliki jawaban yang tepat untuk saya, meskipun itu mungkin bukan apa yang dicari OP (meskipun pertanyaannya menyisakan ruang untuk interpretasi). Meski begitu, Bekim tidak memberikan contoh.

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

Contoh di atas mengatur elemen yang ...

• menggunakan CSS murni dan sederhana dan tidak ada yang lain
• diposisikan secara vertikal seolah-olah berada dalam aliran ( toppengaturan default )
• diposisikan secara horizontal di tepi kanan halaman ( right: 0)
• tidak mengambil ruang apa pun, namun akan bergerak secara alami saat halaman bergulir ( position: absolute)