¿Cómo se superponen dos <div> s?

154

Necesito dos divs para parecer un poco así:

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

¿Cuál es la forma más elegante y elegante de hacer que se superpongan perfectamente? El logotipo tendrá una altura y un ancho fijos y tocará el borde superior de la página.

css html overlap

88

Podría abordarlo así (CSS y 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 fragmento

— Owen
fuente

2

¿Hay alguna forma de hacer contenido solo para evitar el espacio utilizado por el logotipo?

— Javier

1

hmm puedes aclarar? ¿Supongo que quiere decir que solo quiere el logotipo sobre el contenido? si es así, eso es solo un flujo normal de divs (así que elimine la posición izquierda, superior, del #logo). ¡Aunque tengo la sensación de que quieres decir algo más! :)

— Owen

2

Creo que lo que se quería decir era que el contenido (texto) envolviera el logotipo

— Davy8

2

ah hmm, estoy bastante seguro de que no. El problema de ser un elemento puede ser flotante o posicionado, pero no ambos. hasta que desarrollen algún tipo de flotación: idea central ...

— Owen

88

Solo use márgenes negativos, en el segundo div diga:

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

Y asegúrese de establecer la propiedad del índice z para obtener las capas que desea.

— TravisO
fuente

9

Este es, con mucho, el método más simple y puede adaptarse fácilmente para pies de página superpuestos mediante el uso de margen inferior en el contenido de una página. ¡Gracias!

— Peter DeWeese

1

Esta solución parece depender de DOCTYPE, ¿no? porque no funcionó con HTML5 DOCTYPE cuando lo intenté.

— alumi

2

Esta debería ser la respuesta aceptada, la posición absoluta tiende a causar problemas.

— Dmitriy

5

Con posicionamiento absoluto o relativo, puede hacer todo tipo de superposición. Probablemente desee que el logotipo tenga el siguiente estilo:

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

Nota: la posición absoluta tiene sus excentricidades. Probablemente tenga que experimentar un poco, pero no debería ser demasiado difícil hacer lo que quiere.

— sblundy
fuente

1

¿Causaría eso que el logotipo se superponga con el texto donde están los enlaces? ¿O empujaría los enlaces hacia un lado?

1

No, absoluto elimina efectivamente la etiqueta del flujo. Sería como si no estuviera allí.

— sblundy

2

Usando CSS, configura el logotipo div en posición absoluta, y establece el orden z para estar por encima del segundo div.

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

— FlySwat
fuente

1

Si desea que el logotipo ocupe espacio, probablemente sea mejor que flote hacia la izquierda y luego baje el contenido usando el margen, algo así:

#logo {
    flotador izquierdo;
    margen: 0 10px 10px 20px;
}

#contenido {
    margen: 10px 0 0 10px;
}

o cualquier margen que quieras.

— jishi
fuente