Làm thế nào tôi có thể có nhiều Divs chồng lên nhau bằng Float và không định vị tuyệt đối?

Question

Tôi đang viết lại tất cả mọi thứ và di chuyển ra khỏi vị trí tuyệt đối và thay vì sử dụng phao để định vị mọi thứ theo cách tôi muốn.

Câu hỏi bây giờ là làm thế nào tôi có thể nổi nhiều div trên đầu trang của nhau? Người dùng sẽ có thể chuyển đổi giữa các div này bằng cách nào đó.

Cảm ơn

Edit: Lý do tôi di chuyển ra khỏi vị trí tuyệt đối là tôi muốn div của tôi vẫn còn là một đứa trẻ của mẹ. tức là nếu div của tôi được mở rộng, tôi cũng muốn div cha mẹ được mở rộng.

Answer 1

float không trùng lặp với các đối tượng được thả nổi khác trong cùng một vùng chứa. Xem here để biết ví dụ về ba đối tượng nổi liên tiếp để xem chúng không trùng lặp như thế nào.

Nếu bạn muốn các đối tượng trùng nhau, bạn sẽ muốn/cần sử dụng vị trí tuyệt đối. Bạn có thể sử dụng vị trí tương đối với đối tượng cha mẹ bằng cách đặt cha mẹ thành position:relative; và con thành position: absolute;. Xem here để biết ví dụ về các đối tượng chồng chéo có vị trí tuyệt đối tương đối so với đối tượng gốc.

Nếu, bạn đang cố gắng chỉ có một trong các đối tượng này thực sự hiển thị cùng một lúc, sau đó chỉ cần đặt các đối tượng không được hiển thị thành display: none và chúng sẽ không có khoảng trống trong bố cục trang. Bạn sẽ không cần sử dụng phao hoặc vị trí tuyệt đối.

Answer 2

Bạn có thể sử dụng float: left;, nhưng cá nhân tôi thấy dễ sử dụng hơn display: inline-block; thay thế.

Answer 3

tôi thiếu kinh nghiệm trong selectors CSS, nhưng tôi chắc chắn rằng bạn có thể tìm thấy một cái gì đó mà làm việc tốt hơn so với đặt tên mỗi lớp cụ thể:

http://jsfiddle.net/aJqb2/

HTML:

<div class="over1"></div> 
<div class="over2"></div> 
<div class="over3"></div> 

CSS:

div{ 
    height:50px; 
    width:150px; 

    float:left; 
} 
.over1{ 
    background-color:blue; 
} 
.over2{ 
    margin-top:10px; 
    margin-left:-10px; 
    background-color:green; 
} 
.over3{ 
    margin-top:20px; 
    margin-left:-10px; 
    background-color:orange; 
} 

Answer 4

Tôi không biết làm thế nào bạn sẽ có người dùng chuyển đổi đặt cược ween các DIV mà không cần sử dụng JavaScript.

Có lẽ, để div đầu tiên với bố cục tĩnh mặc định và không hiển thị cho những người khác. Sử dụng JavaScript để chỉ hiển thị một div mỗi lần.