Bagaimana Anda membuat dua <div> tumpang tindih?


154

Saya perlu dua div untuk terlihat sedikit seperti ini:

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

Apa cara paling rapi / paling elegan untuk membuat mereka tumpang tindih dengan rapi? Logo akan memiliki tinggi dan lebar tetap dan akan menyentuh tepi atas halaman.

css  html  overlap 

Jawaban:


88

Saya mungkin mendekatinya seperti itu (CSS dan 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>


2
apakah ada cara untuk membuat konten hanya menghindari ruang yang digunakan oleh logo?
Javier

1
hmm bisakah kamu mengklarifikasi? saya menganggap itu berarti Anda hanya ingin logo di atas konten? jika demikian itu hanya aliran divs yang normal (jadi hapus kiri, atas, posisi dari #logo). Saya punya perasaan Anda berarti sesuatu yang lain! :)
Owen

2
Saya pikir apa yang dimaksudkan adalah untuk memiliki konten (teks) membungkus logo
Davy8

2
ah hmm, saya cukup yakin tidak. masalah menjadi elemen bisa melayang, atau diposisikan, tetapi tidak keduanya. sampai mereka mengembangkan semacam float: ide tengah ...
Owen

88

Cukup gunakan margin negatif, di div kedua katakan:

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

Dan pastikan untuk mengatur properti z-index untuk mendapatkan layering yang Anda inginkan.


9
Sejauh ini, ini adalah metode paling sederhana, dan dapat dengan mudah diadaptasi untuk tumpang tindih footer dengan menggunakan margin-bottom pada konten halaman. Terima kasih!
Peter DeWeese

1
solusi ini tampaknya bergantung pada DOCTYPE, bukan? karena tidak berfungsi dengan HTML5 DOCTYPE ketika saya mencoba.
alumi

2
Ini harus menjadi jawaban yang diterima, posisi absolut cenderung menyebabkan masalah.
Dmitriy

5

Dengan penentuan posisi absolut atau relatif, Anda dapat melakukan segala jenis tumpang tindih. Anda mungkin ingin logo ditata seperti itu:

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

Catatan: posisi absolut memiliki keeksentrikannya. Anda mungkin harus bereksperimen sedikit, tetapi seharusnya tidak terlalu sulit untuk melakukan apa yang Anda inginkan.


1
Apakah itu akan menyebabkan logo tumpang tindih dengan teks di mana tautan berada? Atau itu akan mendorong tautan ke samping?

1
Tidak, absolut secara efektif menghapus tag dari aliran. Seolah-olah itu tidak ada di sana.
merah anggur

2

Menggunakan CSS, Anda mengatur div logo ke posisi absolut, dan mengatur z-order menjadi di atas div kedua.

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

1

Jika Anda ingin logo mengambil tempat, Anda mungkin lebih baik melayang ke kiri lalu memindahkan konten menggunakan margin, seperti ini:

#logo {
    mengapung: kiri;
    margin: 0 10px 10px 20px;
}

#kandungan {
    margin: 10px 0 0 10px;
}

atau margin apa pun yang Anda inginkan.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.