CSS: Làm cho hai phần tử nổi chồng lên nhau

Question

Tôi có hai div trong một vùng chứa. Một phao còn lại và một phao trôi nổi. Cả hai đều rộng khoảng 60% so với container và được thiết kế sao cho chúng chồng lên nhau ở giữa (quyền div được ưu tiên).

Làm cách nào để khiến chúng trùng lặp thay vì ngăn xếp theo chiều dọc như các phần tử nổi thường làm? Nếu tôi định vị sai phần tử bên phải thì div chứa không mở rộng để vừa với nội dung.

Mã (tiếc là tôi không thể jsfiddle này như các máy chủ của họ được đọc chỉ atm):

<div id="container"> 
    <div id="left">left</div> 
    <div id="right">right</div> 
</div> 

#container { 
    width: 400px; 
    background-color: #eee; 
} 

#left { 
    width: 250px; 
    border: 1px solid #ccc; 
    display: inline; 
    float: left; 
} 

#right { 
    width: 250px; 
    border: 1px solid #ccc; 
    display: inline; 
    float: right; 
} 

Answer 1

Sử dụng một tiêu cực margin-right trên hộp trái để ô đúng được phép chồng chéo:

#left { 
    width: 250px; 
    border: 1px solid #ccc; 
    display: inline; 
    float: left; 
    margin-right:-104px; 
} 

Các 104 pixel là số tiền chồng chéo cộng 4px cho biên giới.

Đây là jsfiddle.

Answer 2

Bạn có thể tạo các divs với vị trí tuyệt đối và thêm một z-index tích cực cho một trong những bạn muốn trở thành trong trước mặt.

<div id="container"> 
    <div id="left">left</div> 
    <div id="right">right</div> 
</div> 

#container { 
    width: 400px; 
    background-color: #eee; 
    position: relative; 
} 

#left { 
    width: 250px; 
    border: 1px solid #ccc; 
    display: block; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 

#right { 
    width: 250px; 
    border: 1px solid #ccc; 
    display: inline; 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    z-index: 1; 
} 

Answer 3

Bạn chỉ có thể thực hiện việc đó với định vị.

<div id="container"> 
    <div id="left">left</div> 
    <div id="right">right</div> 
</div> 

#container { 
    width: 400px; 
    background-color: #eee; 
    position: relative; 
} 

#left { 
    width: 250px; 
    border: 1px solid #ccc; 
    position: absolute; 
    left: 0; 
    top: 0; 
    z-index: 1; 
} 

#right { 
    width: 250px; 
    border: 1px solid #ccc; 
    position: absolute; 
    right: 0; 
    top: 0; 
    z-index: 2; 
} 

Answer 4

Hãy thử điều này một:

<div id="container"> 
    <div id="left">left</div> 
    <div id="right">right</div> 
</div> 
<style> 
#container { 
    width: 400px; 
    background-color: #eee; 
} 

#left { 
    width: 250px; 
    border: 1px solid #ccc; 
    float: left; 
} 

#right { 
    width: 250px; 
    border: 1px solid #ccc; 
    margin-left: 150px; 
    position: absolute; 
} 
</style> 

Answer 5

Làm thế nào về kéo div đúng với biên độ tiêu cực. Một cái gì đó như thế này?

<div id="container"> 
    <div id="left">left</div> 
    <div id="right">right</div> 
</div> 

#container { 
    position: relative; 
    width: 400px; 
    height: 110px; 
    background-color: #eee; 
} 

#left { 
    width: 250px; 
    height: 100px; 
    border: 1px solid green; 
    float: left; 
} 

#right { 
    position: relative; 
    float: right; 
    width: 250px; 
    height: 100px; 
    top: -100px; 
    border: 1px solid red; 
} 

Answer 6

Làm cho thùng chứa lớn hơn vừa vừa vặn. Sau đó, sử dụng vị trí tương đối và trái: -100px hoặc bất kỳ thứ gì ở bên phải.

Answer 7

Bạn có thể thêm div phụ vào đó không?

<div id="container"> 
    <div id="left"> 
     <div id="left-inner">left</div> 
    </div> 
    <div id="right">right</div> 
</div> 
<style> 
#container { 
    width: 400px; 
} 

#left { 
    float: left; 
    width: 0px; 
    overflow:visible; 
} 

#left-inner { 
    float: right; 
    width: 250px; 
} 

#right { 
    width: 250px; 
} 
</style> 

Answer 8

xuất sắc Giải pháp: http://jsfiddle.net/A9Ap7/237/

Vì vậy, không sử dụng:

MARGIN-LEFT:100px... 

== hoặc lệnh tương tự.
Vấn đề là, nếu kích thước phần tử bên trái bị thay đổi, nếu cửa sổ được thay đổi kích thước hoặc vv ,,, sau đó nó sẽ làm cho bạn vấn đề! vì vậy, không sử dụng tùy chỉnh như vậy bẩn "thủ thuật", nhưng làm cho một cấu trúc bình thường bên trong html, vì vậy họ nên được tự nhiên ra lệnh.