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

Question

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

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

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

Answer 1

Я мог бы подойти так (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="http://www.skrenta.com/images/stackoverflow.jpg" />
</div>
<div id="content">
  
  <div id="links">dssdfsdfsdfsdf</div>
</div>

Answer 2

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

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

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

Answer 3

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

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

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

Answer 4

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

#logo {
    float: left;
    margin: 0 10px 10px 20px;
}

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

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

Answer 5

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

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