Posisikan elemen secara relatif tanpa mengambil ruang dalam aliran dokumen


186

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


2
Apakah perlu diposisikan secara relatif? Elemen-elemen yang diposisikan sepenuhnya dihilangkan dari aliran dokumen.
Jason Gennaro

Jawaban:


281

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>

bagaimana Anda akan mewarisi lebar dalam hal ini? karena lebar div relatif adalah 0, div absolut tidak akan dapat mewarisi lebar dengan benar jika keduanya berada dalam wadah
Alex H

@ AlexH Sayangnya, metode ini tidak menawarkan cara untuk melakukan itu. Saya akan menyarankan mencoba metode posisi negatif / margin negatif FredK dalam kasus ini.
Nightfirecat

101

Tambahkan margin sama dengan piksel yang Anda pindahkan:

Contoh

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

5
entah kenapa lebih masuk akal bagi saya daripada jawaban yang lain
markasoftware

2
Apakah ini berhasil? Saya mencobanya dalam chrome dan sepertinya tidak berhasil. Saya menggunakannya untuk memposisikan tombol navigasi dari slidesjs, sehingga dapat mengacaukannya juga.
Petruza

1
Saya mencoba ini dengan left: -25px; margin-right: -25px;dan masih mengimbangi elemen saudara secara horizontal dengan 2-3 piksel untuk beberapa alasan.
Mike

Sertakan penggunaan float:right;saat Anda ingin menjadikan ini relatif ke sisi kanan layar sehingga nilai kanan atau kiri bisa lebih kecil dan lebih mudah dikelola.
Damian Green

ingatlah untuk top:nilai - nilai positif yang harus Anda miliki margin-bottom:sama dengan minus dari tinggi elemen, bukan perpindahan
Mr Heelis

21

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/


3

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.


kode contoh sederhana mungkin bisa membantu lebih banyak daripada membaca dan memahami seluruh paragrah. Meskipun konsepnya jelas
MR_AMDEV

0

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>


0

@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)
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.