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.

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>

Luaskan cuplikan

Owen
sumber

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.

TravisO
sumber

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.

merah muda
sumber

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;
}

FlySwat
sumber

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.

jishi
sumber

Bagaimana Anda membuat dua <div> tumpang tindih?

Jawaban: