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.