Paksa "position: absolute" menjadi relatif terhadap dokumen dan bukan penampung induk

93

Saya mencoba memasukkan div ke bagian mana pun dari tubuh dan membuatnya position: absoluterelatif terhadap seluruh dokumen dan bukan elemen induk yang memiliki file position: relative.

html css css-position Timothy Ruhle
sumber
Jika posisinya relatif absolut terhadap dokumen, maka itu termasuk sebagai turunan dari <body>tag, bukan?
Jim Garrison
Apakah Anda melihat solusi saya di bawah?
tw16
Ya. Saya membuat template yang digunakan di banyak halaman dan terkadang di dalam elemen yang diposisikan secara relatif (yang tidak dapat saya kendalikan. Sekarang saya melihat bahwa itu tidak mungkin. Terima kasih atas bantuan Anda. +1 dari saya, dan saya akan menandainya sebagai benar jika Anda mengatakan bahwa itu tidak mungkin dalam jawaban Anda.
Timothy Ruhle
BrainJar memiliki pengantar yang benar-benar klasik untuk pemosisian di CSS yang akan menjernihkan pertanyaan yang masih ada di sini.
Alan H.

Jawaban:

36

Anda harus menempatkan bagian divluar position:relativeelemen dan ke dalam body.

tw16
sumber
1
^^ Ini. Jika itu benar-benar diposisikan maka sebenarnya tidak ada alasan untuk memilikinya di dalam elemen yang diposisikan secara relatif.
DOOManiac
7
@DOOManiac - Anda mungkin menginginkannya di dalam elemen yang diposisikan secara relatif karena Anda ingin menjalankan skrip gerakan mouse, atau tidak menjalankan skrip mouseout yang dipicu oleh induknya. Jawaban saya memungkinkan untuk situasi seperti itu.
Michael. Lumley
1
@DOOManiac alasan untuk menempatkan elemen absolut ke dalam elemen relatif adalah untuk memposisikan div absolut relatif terhadap elemen relatif. Jika Anda ingin memposisikan relatif terhadap tubuh, isi secara default adalah relatif, meskipun tidak disetel seperti itu.
Jason Foglia
19
Ada ratusan alasan mengapa Anda perlu memiliki container untuk menjadi anak container lain, tetapi posisinya harus mutlak untuk dokumen tersebut. Jawaban seperti memasukkannya langsung ke badan adalah salah. Jawaban yang benar adalah posisi: tetap. Suara negatif.
walv
3
@walv: position:fixeddan position:absolutetidak memiliki perilaku yang sama. Perbaikan relatif terhadap viewport (bukan dokumen) dan akan menyebabkan item selalu terlihat bahkan setelah menggulir berpotensi menyebabkan tumpang tindih, dll. Saya memahami bahwa mungkin ada alasan yang valid untuk struktur html, tetapi karena pertanyaannya secara khusus tentang html dan css, jawaban saya benar. Satu-satunya cara tanpa JS untuk membuatnya relatif terhadap dokumen adalah dengan mengeluarkannya dari position:relativeelemen.
tw16
95

Anda sedang mencari position: fixed.

Dari MDN :

Pemosisian tetap mirip dengan pemosisian absolut, dengan pengecualian bahwa blok yang memuat elemen adalah area pandang. Ini sering digunakan untuk membuat elemen mengambang yang tetap di posisi yang sama bahkan setelah menggulir halaman.

Adrian Holovaty
sumber
28
Masalah dengan jawaban ini adalah pengguna ingin menggunakan absolut karena elemen tetap tidak bergerak pada scroll dan elemen absolut melakukannya :)
Teman
3
Anda seorang legenda mutlak.
Benisburgers
6
Pertanyaannya adalah bagaimana memposisikan relatif terhadap dokumen dan bukan viewport
Paul Humphreys
Ini berpotensi menyebabkan masalah di ie11, karena bug dengan konteks susun
James Westgate
32

Solusi saya adalah menggunakan jQuery untuk memindahkan div di luar induknya:

<script>
    jQuery(document).ready(function(){
        jQuery('#loadingouter').appendTo("body");
    });
</script>

<div id="loadingouter"></div>
liorq
sumber
1
Ini memecahkan masalah saya karena saya tidak dapat menempatkan elemen saya langsung di dalam elemen body karena saya menggunakan halaman master. Terima kasih!
Osprey
9

Jika Anda tidak ingin melampirkan elemen ke body, solusi berikut akan berfungsi.

Saya datang ke pertanyaan ini mencari solusi yang akan bekerja tanpa melampirkan div ke tubuh, karena saya memiliki skrip gerakan mouse yang ingin saya jalankan saat mouse berada di atas elemen baru dan elemen yang menelurkannya. Selama Anda mau menggunakan jQuery, dan terinspirasi oleh jawaban @Liam William:

var leftOffset = <<VALUE>>;
var topOffset = <<VALUE>>;
$(element).css("left", leftOffset - element.offset().left);
$(element).css("top", topOffset - element.offset().top);

Solusi ini bekerja dengan mengurangkan posisi kiri dan atas elemen saat ini (relatif terhadap badan) untuk memindahkan elemen ke 0, 0. Menempatkan elemen di mana pun Anda inginkan relatif terhadap badan semudah menambahkan offset kiri dan atas nilai.

Michael. Lumley
sumber
2
Yang juga perlu disebutkan adalah fungsi posisi jQueryUI .
Michael. Lumley
8

Ini tidak mungkin hanya dengan CSS dan HTML.

Menggunakan Javascript / jQuery Anda berpotensi mendapatkan elemen jQuery.offset()ke DOM dan membandingkannya jQuery.position()untuk menghitung di mana ia akan muncul pada halaman.

jeruk nipis
sumber
IMHO jawaban ini adalah yang paling membantu - tanpa memindahkan elemen langsung di bawah tubuh (yang tidak selalu memungkinkan) dan tanpa menggunakan posisi tetap yang akan membuat elemen selalu muncul bahkan saat menggulir ke bawah kita hanya dapat menggunakan JS. jQuery.offset({ left: 0 })Untuk kemenangan!
BornToCode