CSS: Làm thế nào để thực hiện một khối div * không * mất không gian trong thùng chứa mẹ

Question

Nếu tôi có 2 thẻ div:

<div id="parentDiv"> 
    <div id="childDiv"><!-- other html --></div> 
    <!-- parent div html --> 
</div> 

Tôi muốn các nội dung của <div id="childDiv"> để chồng chéo nội dung <!-- parent div html -->.

Lý do (trong trường hợp này có vẻ như thiết kế mã xấu cho bất kỳ ai): Tôi cần giải pháp khắc phục sự cố trong các trang web của google, tôi không thể thêm mã tùy chỉnh trên thanh điều hướng bên, chỉ trong không gian html chính, tôi muốn thả nổi div không có không gian và tương đối vị trí nó trên thanh bên để có được xung quanh giới hạn buộc.

Tôi có thể thực hiện mọi thứ ngoại trừ việc dừng childDiv để chiếm không gian trong vùng chứa trang chính bị bẻ khóa.

Answer 1

Bạn có thể cho nó một vị trí tuyệt đối và điều hướng nó với lề.

 

    #childDiv { 
     position: absolute; 
     margin-top: -100px; 
     margin-left: -100px; 
    } 

Answer 2

Bạn phải bỏ chặn trẻ em ra khỏi luồng. Cách tốt nhất để làm điều này là position: absolute trên trẻ em div và position: relative trên bố mẹ div.

Answer 3

Làm thế nào về một đơn giản

#childDiv {height:0; overflow:visible;}

Nhưng có lẽ bạn muốn nó có một màu nền, hm? Hm.

Answer 4

#parentDiv { 
    position: relative; 
} 
#childDiv { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
} 

Nếu bạn cần phải bump nội dung xung quanh, hoặc chồng chéo thứ mà là 'bên ngoài' của thanh bên, bạn có thể sử dụng lợi nhuận tiêu cực để tăng chiều rộng của childDiv hoặc di chuyển nó lên (để trang trải đệm hoặc lề bạn không thể ghi đè).

Nếu bạn cần làm cho #childDiv bao phủ toàn bộ #parentDiv, bạn có thể sử dụng một chút JavaScript để đặt chiều cao tối thiểu trên childDiv, sau đó thêm nền màu hoặc nội dung nào đó để che bất kỳ nội dung nào.

var parentHeight = jQuery('#parentDiv').height(); 
jQuery('#childDiv').css('min-height',parentHeight + 'px');