css - posicion - ¿Cómo se haría la superposición de dos<div> s?

posicion fija css

Question

Necesito dos divs para que se parezcan un poco a esto:

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

¿Cuál es la forma más elegante / más 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.

Answer 1

Con CSS, estableces el logo div en posición absoluta y configuras el orden z para que esté por encima del segundo div.

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

Answer 2

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

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

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

Answer 3

Podría abordarlo como tal (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="http://www.skrenta.com/images/.jpg" />
</div>
<div id="content">
  
  <div id="links">dssdfsdfsdfsdf</div>
</div>

Answer 4

Si desea que el logotipo ocupe espacio, probablemente sea mejor que lo desplace hacia la izquierda y luego bajar el contenido usando el margen, más o menos así:

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

o el margen que quieras.

Answer 5

Solo usa márgenes negativos, en el segundo div di:

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

Y asegúrese de establecer la propiedad z-index para obtener las capas que desea.