Como você faria a sobreposição de dois <div> s?

154

Eu preciso de duas divs para parecer um pouco com isso:

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

Qual é a maneira mais elegante / elegante de fazê-las se sobrepor perfeitamente? O logotipo terá altura e largura fixas e tocará a borda superior da página.

css html overlap

88

Eu poderia abordá-lo assim (CSS e 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>

Expandir snippet

— Owen
fonte

2

existe alguma maneira de criar conteúdo para evitar o espaço usado pelo logotipo?

— Javier

1

hmm, você pode esclarecer? Entendo que você quer apenas o logotipo acima do conteúdo? nesse caso, é apenas um fluxo normal de divs (remova a esquerda, a posição superior e a posição de #logo). Tenho a sensação de que você quer dizer outra coisa! :)

— Owen

2

Eu acho que o que se pretendia era ter o conteúdo (texto) embrulhar ao redor do logotipo

— Davy8

2

ah hmm, tenho certeza que não. o problema de ser um elemento pode ser flutuado ou posicionado, mas não ambos. até que desenvolvam algum tipo de float: idéia central ...

— Owen

88

Basta usar margens negativas, na segunda div diga:

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

E certifique-se de definir a propriedade z-index para obter as camadas desejadas.

— TravisO
fonte

9

Esse é de longe o método mais simples e pode ser facilmente adaptado para rodapés sobrepostos usando a margem inferior no conteúdo de uma página. Obrigado!

— 22812 Peter DeWeese

1

esta solução parece depender do DOCTYPE, não é? porque não funcionou com o HTML5 DOCTYPE quando tentei.

— Alumi 12/08

2

Esta deve ser a resposta aceita, posição absoluta tende a causar problemas.

— Dmitriy

5

Com o posicionamento absoluto ou relativo, você pode fazer todo tipo de sobreposição. Você provavelmente deseja que o logotipo tenha o seguinte estilo:

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

Nota: posição absoluta tem suas excentricidades. Você provavelmente terá que experimentar um pouco, mas não deve ser muito difícil fazer o que quiser.

— esplêndido
fonte

1

Isso faria com que o logotipo se sobrepusesse ao texto onde estão os links? Ou empurraria os links para o lado?

1

Não, o absoluto remove efetivamente a tag do fluxo. Seria como se não estivesse lá.

— sblundy

2

Usando CSS, você define o div do logotipo para a posição absoluta e a ordem z para estar acima do segundo div.

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

— FlySwat
fonte

1

Se você deseja que o logotipo ocupe espaço, provavelmente é melhor flutuar para a esquerda e depois mover o conteúdo usando a margem, mais ou menos assim:

#logo {
    flutuar: esquerda;
    margem: 0 10 px 10 px 20 px;
}

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

ou qualquer margem que você desejar.

— jishi
fonte