Nổi đúng và vị trí tuyệt đối không làm việc cùng nhau

Tôi muốn một div luôn luôn ở bên phải div cha của nó, vì vậy tôi sử dụng float:right. Nó hoạt động.

Nhưng tôi cũng muốn nó không ảnh hưởng đến nội dung khác khi chèn, vì vậy tôi sử dụng position:absolute.

Bây giờ float:rightkhông hoạt động, div của tôi luôn ở bên trái của div cha. Làm thế nào tôi có thể di chuyển nó sang bên phải?

Sử dụng

position:absolute; right: 0;

Không cần float:rightvới định vị tuyệt đối

Ngoài ra, đảm bảo phần tử cha được đặt thành position:relative;

Nói chung, floatlà một tuyên bố định vị tương đối, vì nó chỉ định vị trí của phần tử so với vùng chứa chính của nó (nổi sang phải hoặc trái). Điều này có nghĩa là nó không tương thích với position:absolutetài sản, bởi vì đó position:absolutelà một tuyên bố định vị tuyệt đối. Bạn có thể thả nổi một phần tử và cho phép trình duyệt định vị nó so với vùng chứa chính của nó hoặc bạn có thể chỉ định một vị trí tuyệt đối và buộc phần tử xuất hiện ở một vị trí nhất định bất kể cha mẹ của nó. Nếu bạn muốn một phần tử được định vị tuyệt đối xuất hiện ở phía bên phải màn hình, bạn có thể sử dụng position: absolute; right: 0;, nhưng điều này sẽ khiến phần tử này luôn xuất hiện ở cạnh phải của màn hình bất kể bố mẹ của nó rộng bao nhiêu div(vì vậy nó đã thắng ' t là "ở bên phải div cha của nó").

Bạn có thể sử dụng " translateX (-100%) " và " text-align: right " nếu phần tử tuyệt đối của bạn là " 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>

Bạn sẽ có được phần tử tuyệt đối được căn chỉnh theo đúng họ hàng của nó

Có lẽ bạn nên chia nội dung của mình như vậy bằng cách sử dụng float:

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

Lưu ý rằng overflow: auto;, điều này là để đảm bảo rằng bạn có một số chiều cao cho container của bạn. Những thứ nổi sẽ đưa chúng ra khỏi DOM, để đảm bảo rằng các phần tử bên dưới của bạn không chồng lên các phao lang thang của bạn, đặt một thùng chứa divđể có overflow: auto(hoặc overflow: hidden) để đảm bảo rằng các phao được tính khi vẽ chiều cao của bạn. Kiểm tra thêm thông tin về phao và cách sử dụng chúng ở đây .

Tôi đã có thể định vị hoàn toàn một phần tử nổi bên phải với một lớp lồng và lề khó:

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>

Tôi đã quyết định làm cho nó bật lên để bạn có thể thấy nó không ảnh hưởng đến dòng văn bản xung quanh (chạy nó và nhấn nút để hiển thị / ẩn hộp tuyệt đối nổi).