Làm cách nào để định vị phần tử bên dưới phần tử vị trí tương đối mà không chồng chéo?

Question

Nếu tôi đặt bất kỳ thứ gì sau phần tử có các phần tử vị trí tương đối + tuyệt đối, nó chồng lên nhau. Nó không làm điều này nếu tôi chỉ định chiều cao, nhưng tôi không muốn làm điều này vì nội dung của phần tử tương đối định vị là động. Làm thế nào để thoát khỏi sự chồng chéo mà không chỉ định chiều cao?

đơn giản ví dụ:

<div style="position:relative"> 
    <div style="position:absolute;"> 
     blabla 
    </div> 
</div> 
I WANT THIS BELOW 

Answer 1

Vì bạn đã áp dụng position:relative đến yếu tố đầu tiên của bạn, hoặc bạn đã xác định hoặc cung cấp heightpadding-bottom với nó.

Ví dụ: trong mã được cung cấp của bạn, tôi đã áp dụng height của 20px cho nó.

Lưu ý: Sử dụng height là tốt hơn so với sử dụng padding-bottom cho các loại hình kịch bản

<div style="position: relative; height: 20px;"> 
    <div style="position:absolute;">blabla</div> 
</div> 
<div>I WANT THIS BELOW</div> 

Answer 2

absolute vị có yếu tố ra khỏi dòng chảy của cấu trúc. Sự hiện diện của nó bị bỏ qua vì lý do này, đó là mục đích của nó. Nếu bạn cần một yếu tố vị trí bên trái hoặc bên phải sau đó sử dụng float

Khi yếu tố nổi đảm bảo bạn xóa đáy của div như vậy thì bố trí được bảo tồn

<div style="clear:both;"></div>

DEMO http://jsfiddle.net/kevinPHPkevin/uHuSF/

Nếu một cách tiếp cận khác nhau là cần thiết để đạt được mục tiêu của bạn.