Làm thế nào để làm cho các yếu tố vị trí tuyệt đối di chuyển với phần còn lại của trang?

Question

Khi tôi đặt vị trí tuyệt đối đối tượng, nó bị kẹt ở đó. Khi bạn thay đổi kích thước cửa sổ trình duyệt, nó vẫn ở đó trong khi các đối tượng khác trượt xung quanh, do đó làm chết toàn bộ điểm.

Hiện tại, điều này chỉ dành cho tôi. Rõ ràng nó hoạt động trên các trang web bình thường, chẳng hạn như trang web của bạn ngay bây giờ. khi bạn thay đổi kích thước cửa sổ mọi thứ di chuyển xung quanh và vẫn ở trong mẫu tổng thể của nó.

Làm cách nào để đạt được điều này với định vị tuyệt đối?

Answer 1

Bạn cần đặt div nằm hoàn toàn bên trong div vị trí tương đối. Bất cứ lúc nào div di chuyển tương đối vị trí, div vị trí tuyệt đối cũng sẽ di chuyển với nó.

<div class="relative" > 
    <div class="absolute">absolute</div> 
</div> 

.relative{ 
    position:relative; 
    top:100px; 
    left:100px; 
    width:500px; 
    height:500px; 
    background:blue; 
} 


.absolute{ 
    position:absolute; 
    width:100px; 
    height:100px; 
    background:red; 
    top:30px; 
    left:50px; 
} 

Kiểm tra ví dụ làm việc tại http://jsfiddle.net/w2EMu/

Answer 2

Giải pháp tốt nhất là tránh định vị tuyệt đối. Nhưng nếu bạn sử dụng nó và muốn đặt lại vị trí đối tượng tuyệt đối của bạn, bạn có thể đăng ký một phương pháp thay đổi kích thước. Ví dụ. jQuery.resize() và tự định vị lại. Nếu bạn không sử dụng jQuery, bạn phải sử dụng document.addEventListener và document.attachEvent.