Làm thế nào bạn có thể làm cho hai <div> chồng chéo?

154

Tôi cần hai div để trông giống như thế này:

    |               |
 ---|    LOGO       |------------------------
|   |_______________|  LINKS                |
|             CONTENT                       |

Cách gọn gàng / thanh lịch nhất để làm cho chúng chồng lên nhau gọn gàng là gì? Logo sẽ có chiều cao và chiều rộng cố định và sẽ chạm vào cạnh trên của trang.

css html overlap

88

Tôi có thể tiếp cận nó như vậy (CSS và HTML):

html,
body {
  margin: 0px;
}
#logo {
  position: absolute; /* Reposition logo from the natural layout */
  left: 75px;
  top: 0px;
  width: 300px;
  height: 200px;
  z-index: 2;
}
#content {
  margin-top: 100px; /* Provide buffer for logo */
}
#links {
  height: 75px;
  margin-left: 400px; /* Flush links (with a 25px "padding") right of logo */
}

<div id="logo">
  <img src="https://via.placeholder.com/200x100" />
</div>
<div id="content">
  
  <div id="links">dssdfsdfsdfsdf</div>
</div>

Mở rộng đoạn trích

— Owen
nguồn

2

Có cách nào để làm cho nội dung chỉ cần tránh không gian được sử dụng bởi logo?

— Javier

1

hmm bạn có thể làm rõ? tôi có nghĩa là bạn chỉ muốn logo ở trên nội dung? nếu vậy đó chỉ là một luồng div bình thường (vì vậy hãy loại bỏ vị trí bên trái, trên cùng, khỏi #logo). tôi có cảm giác bạn có ý gì khác! :)

— Owen

2

Tôi nghĩ những gì có nghĩa là có nội dung (văn bản) bao quanh logo

— Davy8

2

ah hmm, tôi khá chắc chắn không. vấn đề là một yếu tố có thể được thả nổi, hoặc định vị, nhưng không phải cả hai. cho đến khi họ phát triển một số loại nổi: ý tưởng trung tâm ...

— Owen

88

Chỉ cần sử dụng lề âm, trong div thứ hai nói:

<div style="margin-top: -25px;">

Và đảm bảo đặt thuộc tính z-index để có được lớp bạn muốn.

— Travis
nguồn

9

Đây là phương pháp đơn giản nhất và có thể dễ dàng được điều chỉnh cho các chân trang chồng chéo bằng cách sử dụng lề dưới trên nội dung của trang. Cảm ơn!

— Peter De Weese

1

Giải pháp này dường như phụ thuộc vào DOCTYPE, phải không? bởi vì nó không hoạt động với HTML5 DOCTYPE khi tôi thử.

— alumi

2

Đây phải là câu trả lời được chấp nhận, vị trí tuyệt đối có xu hướng gây ra vấn đề.

— Dmitriy

5

Với định vị tuyệt đối hoặc tương đối, bạn có thể thực hiện tất cả các loại chồng chéo. Bạn có thể muốn logo được tạo kiểu như vậy:

div#logo {
  position: absolute;
  left: 100px; // or whatever
}

Lưu ý: vị trí tuyệt đối có độ lệch tâm của nó. Có lẽ bạn sẽ phải thử nghiệm một chút, nhưng không quá khó để làm những gì bạn muốn.

— sblundy
nguồn

1

Điều đó sẽ làm cho logo chồng lên văn bản nơi liên kết là mặc dù? Hoặc nó sẽ đẩy các liên kết sang một bên?

1

Không, hoàn toàn có hiệu quả loại bỏ thẻ khỏi luồng. Nó sẽ như thể nó không có ở đó.

— sblundy

2

Sử dụng CSS, bạn đặt div logo ở vị trí tuyệt đối và đặt thứ tự z ở trên div thứ hai.

#logo
{
    position: absolute:
    z-index: 2000;
    left: 100px;
    width: 100px;
    height: 50px;
}

— FlySwat
nguồn

1

Nếu bạn muốn logo chiếm không gian, có lẽ bạn nên thả nó sang trái và sau đó di chuyển xuống nội dung bằng cách sử dụng lề, đại loại như thế này:

#Logo {
    phao: trái;
    lề: 0 10px 10px 20px;
}

#Nội dung {
    lề: 10px 0 0 10px;
}

hoặc bất cứ điều gì bạn muốn.

— jishi
nguồn