Apung posisi kanan dan absolut tidak bekerja bersama


126

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:righttidak berfungsi, div saya selalu di sebelah kiri div induknya. Bagaimana saya bisa memindahkannya ke kanan?

Jawaban:


294

Menggunakan

position:absolute; right: 0;

Tidak perlu float:rightdengan posisi absolut

Juga, pastikan elemen induk diatur ke position:relative;


jika ingin div di pusat elemen induk, bagaimana saya bisa melakukan itu?
trbaphong

Terima kasih atas bantuan Anda. Saya menggunakan left:50%dan margin-left:-??px(?? tergantung pada lebar div Anda)
trbaphong

Dengan jawaban @ eivers88, saya masih perlu menghapus 'overflow-y: auto;' dari elemen induk untuk membuatnya berfungsi.
angelokh

bagaimana jika lebar div adalah dinamis
Muhammad Umer

2
Ok, saya mendapatkan pelampung itu: benar tidak diperlukan untuk penentuan posisi absolut, tapi ... Bagaimana bila Anda memiliki dua elemen absolut di dalam induk (posisi: relatif) yang sama dan Anda ingin mereka disejajarkan ke kanan, satu di samping yang lain? Lebar mereka dinamis ...
spuas

26

Secara umum, floatadalah pernyataan posisi relatif, karena menentukan posisi elemen relatif terhadap wadah induknya (mengambang ke kanan atau kiri). Ini berarti tidak kompatibel dengan position:absoluteproperti, karena position:absolutemerupakan 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 menggunakan position: absolute; right: 0;, tetapi ini akan menyebabkan elemen untuk selalu muncul di tepi kanan layar terlepas dari seberapa lebar induknya div(sehingga ia menang ' t menjadi "di sebelah kanan div induknya").


3
Jika orang tua divadalah position: relative, ini divakan diposisikan di sebelah kanan orang tua itu, bukan layar.
trysis

3

Anda dapat menggunakan " translateX (-100%) " dan " text-align: right " jika elemen absolut Anda adalah " display: inline-block "

<div class="box">
<div class="absolute-right"></div>
</div>

<style type="text/css">
.box{
    text-align: right;
}
.absolute-right{
    display: inline-block;
    position: absolute;
}

/*The magic:*/
.absolute-right{
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
</style>

Anda akan mendapatkan elemen absolut selaras dengan relasi yang tepat orang tuanya


2

Mungkin Anda harus membagi konten Anda seperti menggunakan pelampung:

<div style="overflow: auto;">
    <div style="float: left; width: 600px;">
        Here is my content!
    </div>
    <div style="float: right; width: 300px;">
        Here is my sidebar!
    </div>
</div>

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 wadah divuntuk memiliki overflow: auto(atau overflow: hidden) untuk memastikan bahwa benda hias diperhitungkan saat menggambar tinggi Anda. Lihatlah informasi lebih lanjut tentang kendaraan hias dan cara menggunakannya di sini .


0

Saya dapat benar-benar memposisikan elemen melayang-kanan dengan satu lapisan sarang dan margin rumit:

function test() {
  document.getElementById("box").classList.toggle("hide");
}
.right {
  float:right;
}
#box {
  position:absolute; background:#feb;
  width:20em; margin-left:-20em; padding:1ex;
}
#box.hide {
  display:none;
}
<div>
  <div class="right">
    <button onclick="test()">box</button>
    <div id="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
      nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat.
  </p>
</div>

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

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.