Apung posisi kanan dan absolut tidak bekerja bersama

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?

Menggunakan

position:absolute; right: 0;

Tidak perlu float:rightdengan posisi absolut

Juga, pastikan elemen induk diatur ke position:relative;

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

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

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 .

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