Saya ingin div selalu di sebelah kanan div induknya, jadi saya gunakan float:right
. Berhasil.
Tapi saya juga ingin itu tidak mempengaruhi konten lain saat dimasukkan, jadi saya gunakan position:absolute
.
Sekarang float:right
tidak berfungsi, div saya selalu di sebelah kiri div induknya. Bagaimana saya bisa memindahkannya ke kanan?
left:50%
danmargin-left:-??px
(?? tergantung pada lebar div Anda)Secara umum,
float
adalah pernyataan posisi relatif, karena menentukan posisi elemen relatif terhadap wadah induknya (mengambang ke kanan atau kiri). Ini berarti tidak kompatibel denganposition:absolute
properti, karenaposition:absolute
merupakan pernyataan posisi absolut. Anda dapat melayang elemen dan memungkinkan browser untuk memposisikannya relatif terhadap wadah induknya, atau Anda dapat menentukan posisi absolut dan memaksa elemen muncul di posisi tertentu terlepas dari induknya. Jika Anda ingin elemen yang benar-benar diposisikan untuk muncul di sisi kanan layar, Anda dapat menggunakanposition: absolute; right: 0;
, tetapi ini akan menyebabkan elemen untuk selalu muncul di tepi kanan layar terlepas dari seberapa lebar induknyadiv
(sehingga ia menang ' t menjadi "di sebelah kanan div induknya").sumber
div
adalahposition: relative
, inidiv
akan diposisikan di sebelah kanan orang tua itu, bukan layar.Anda dapat menggunakan " translateX (-100%) " dan " text-align: right " jika elemen absolut Anda adalah " display: inline-block "
Anda akan mendapatkan elemen absolut selaras dengan relasi yang tepat orang tuanya
sumber
Mungkin Anda harus membagi konten Anda seperti menggunakan pelampung:
Perhatikan
overflow: auto;
, ini untuk memastikan bahwa Anda memiliki ketinggian untuk wadah Anda. Benda-benda terapung mengeluarkannya dari DOM, untuk memastikan bahwa elemen Anda di bawah tidak tumpang tindih dengan wahana pengembara Anda, atur wadahdiv
untuk memilikioverflow: auto
(atauoverflow: hidden
) untuk memastikan bahwa benda hias diperhitungkan saat menggambar tinggi Anda. Lihatlah informasi lebih lanjut tentang kendaraan hias dan cara menggunakannya di sini .sumber
Saya dapat benar-benar memposisikan elemen melayang-kanan dengan satu lapisan sarang dan margin rumit:
Saya memutuskan untuk membuat ini toggleable sehingga Anda dapat melihat bagaimana itu tidak mempengaruhi aliran teks di sekitarnya (jalankan dan tekan tombol untuk menampilkan / menyembunyikan kotak absolut mengambang).
sumber