Как бы вы сделали два <div> перекрытия?

154

Мне нужно два div, чтобы выглядеть примерно так:

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

Какой самый приятный / самый элегантный способ сделать их аккуратно перекрывать друг друга? Логотип будет иметь фиксированную высоту и ширину и будет касаться верхнего края страницы.

css html overlap

88

Я мог бы подойти к этому так (CSS и 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

Есть ли способ сделать контент, просто избегая места, используемого логотипом?

— Хавьер

1

хм, вы можете уточнить? Я так понимаю, что вы просто хотите, чтобы логотип над содержимым? если это так, то это просто обычный поток элементов div (поэтому удалите left, top, position из #logo). Я чувствую, что вы имеете в виду что-то еще, хотя! :)

— Оуэн

2

Я думаю, что имелось в виду, что контент (текст) оборачивался вокруг логотипа

— Davy8

2

ааааа, я уверен, что нет. проблема в том, что элемент может быть плавающим или позиционированным, но не обоими. пока они не разработают какой-то тип поплавка: центральная идея ...

— Оуэн

88

Просто используйте отрицательные поля, во втором div скажите:

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

И убедитесь, что вы установили свойство z-index для получения нужного слоя.

— TravisO
источник

9

Это, безусловно, самый простой метод, и его можно легко адаптировать для перекрывающихся нижних колонтитулов с помощью поля margin-bottom в содержимом страницы. Спасибо!

— Питер ДеВиз

1

это решение зависит от DOCTYPE, не так ли? потому что он не работал с HTML5 DOCTYPE, когда я пытался.

— alumi

2

Это должен быть принятый ответ, абсолютная позиция имеет тенденцию вызывать проблемы.

— Дмитрий

5

С абсолютным или относительным позиционированием вы можете делать всевозможные перекрытия. Возможно, вы хотите, чтобы логотип был оформлен так:

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

Примечание: абсолютная позиция имеет свои эксцентриситеты. Возможно, вам придется немного поэкспериментировать, но не должно быть слишком сложно делать то, что вы хотите.

— sblundy
источник

1

Приведет ли это к тому, что логотип будет перекрывать текст там, где есть ссылки? Или это подтолкнет ссылки в сторону?

1

Нет, абсолютно эффективно удаляет тег из потока. Это было бы так, как будто этого не было.

— Сблунди

2

Используя CSS, вы устанавливаете логотип div в абсолютное положение и устанавливаете z-порядок выше второго div.

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

— FlySwat
источник

1

Если вы хотите, чтобы логотип занимал пространство, вам, вероятно, лучше переместить его влево, а затем перемещать содержимое вниз по марже, например, так:

#logo {
    плыть налево;
    поле: 0 10px 10px 20px;
}

#content {
    поле: 10px 0 0 10px;
}

или любой другой запас, который вы хотите.

— Jishi
источник