İki <div> nin çakışmasını nasıl sağlıyorsunuz?

154

Biraz böyle görünmek için iki div gerekir:

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

Onları düzgün bir şekilde örtüşmenin en güzel / en zarif yolu nedir? Logo sabit bir yüksekliğe ve genişliğe sahip olacak ve sayfanın üst kenarına dokunacaktır.

css html overlap

88

Ben (CSS ve HTML) şöyle yaklaşabilir:

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>

Snippet'i genişlet

— Owen
kaynak

2

İçerik yapmanın sadece logo tarafından kullanılan alandan kaçınmanın bir yolu var mı?

— Javier

1

hmm netleştirebilir misin? sadece içeriğin üzerindeki logoyu istediğiniz anlamına mı geliyor? öyleyse, bu yalnızca div değerlerinin normal bir akışıdır (bu nedenle #logo'dan sola, üstten, konumu kaldırın). başka bir şey demek istediğini hissediyorum! :)

— Owen

2

Bence ne anlama geliyordu içerik (metin) logo etrafında sarmak için

— Davy8

2

ah hmm, emin değilim. bir unsur olmanın problemi yüzebilir veya konumlandırılabilir, ancak her ikisi birden değil. bir çeşit şamandıra geliştirene kadar: merkez fikir ...

— Owen

88

İkinci div'de negatif kenar boşlukları kullanın:

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

Ve istediğiniz katmanı elde etmek için z-index özelliğini ayarladığınızdan emin olun.

— TravisO
kaynak

9

Bu, en basit yöntemdir ve bir sayfanın içeriğinde kenar boşluğu kullanarak üst üste binen altbilgiler için kolayca uyarlanabilir. Teşekkürler!

— Peter DeWeese

1

bu çözüm DOCTYPE'a bağlı gibi görünüyor, değil mi? çünkü denediğimde HTML5 DOCTYPE ile çalışmadı.

— alumi

2

Bu kabul edilen cevap olmalı, mutlak konum problemlere neden olma eğilimindedir.

— Dmitriy

5

Mutlak veya göreli konumlandırma ile, her türlü örtüşmeyi yapabilirsiniz. Muhtemelen logonun bu şekilde şekillendirilmesini istersiniz:

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

Not: mutlak konumun eksantriklikleri vardır. Muhtemelen biraz deneme yapmak zorunda kalacaksınız, ancak istediğinizi yapmak çok zor olmamalı.

— sblundy
kaynak

1

Bu, logonun bağlantıların olduğu metinle çakışmasına neden olur mu? Yoksa bağlantıları kenara itecek mi?

1

Hayır, mutlak etiketi akıştan etkili bir şekilde kaldırır. Sanki orada değilmiş gibi olurdu.

— sblundy

2

CSS kullanarak, logo div değerini mutlak konuma ve z sırasını ikinci div değerinin üzerinde olacak şekilde ayarlarsınız.

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

— sineklik
kaynak

1

Logonun yer kaplamasını istiyorsanız, büyük olasılıkla onu sola kaydırıp içeriği kenar boşluğu kullanarak aşağı taşıyabilirsiniz, şöyle:

#logo {
    şamandıra: sol;
    kenar boşluğu: 0 10 piksel 10 piksel 20 piksel;
}

#content {
    kenar boşluğu: 10 piksel 0 0 10 piksel;
}

veya istediğiniz herhangi bir marj.

— Jishi
kaynak