Cách mở rộng DIV mà không ảnh hưởng đến các yếu tố khác

Question

Tôi tự hỏi làm thế nào tôi có thể mở rộng một 'div' mà không ảnh hưởng đến bố cục của các phần tử khác trong trang. Cụ thể, tôi muốn đạt được một hiệu ứng tương tự như thế này - http://www.ikea.com/us/en/catalog/categories/departments/kitchen/kitchen_int_lighting/. Nếu bạn di chuột qua bất kỳ sản phẩm nào, bạn sẽ thấy rằng hộp mở rộng hiển thị thêm thông tin; tuy nhiên, các yếu tố khác như hình ảnh sản phẩm bên dưới không bị ảnh hưởng bởi việc mở rộng.

Answer 1

sử dụng định vị tuyệt đối và sau đó bạn có thể tăng/thu nhỏ div và nó sẽ không ảnh hưởng đến bất kỳ yếu tố nào khác xung quanh nó.

Answer 2

Hoàn toàn định vị div của bạn và đảm bảo chỉ mục z ở cấp cao nhất. Nó có thể được thực hiện bằng cách sử dụng chỉ CSS, nhưng nó có thể sẽ dễ dàng hơn với js là tốt.

Answer 3

Thêm position:absolute; vào kiểu div của bạn. Bằng cách này nó sẽ không can thiệp vào các yếu tố khác nhưng vẫn chồng chéo chúng, và bạn có thể chỉ định bất kỳ chiều rộng và chiều cao nào cho chúng.

Answer 4

sử dụng vị trí tuyệt đối.
thay vào đó bạn cũng có thể đạt được hiệu quả tương tự bằng cách viết sự kiện onhover trên div bằng cách thêm div bổ sung tại vị trí đó với chỉ mục z cao hơn.