Comment faire en sorte que deux <div>s se chevauchent ?

Question

J'ai besoin de deux divs qui ressemblent un peu à ceci :

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

Quelle est la façon la plus élégante de les faire se chevaucher proprement ? Le logo aura une hauteur et une largeur fixes et touchera le bord supérieur de la page.

Answer 1

Il suffit d'utiliser des marges négatives, dans la deuxième div dire :

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

Et assurez-vous de définir la propriété z-index pour obtenir la superposition que vous souhaitez.

Answer 2

Je pourrais l'aborder comme ça :

CSS :

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
}

HTML :

<div id="logo"><img src="logo.jpg" /></div>
<div id="content">
  <div id="links"></div>
</div>

Answer 3

Avec un positionnement absolu ou relatif, vous pouvez faire toutes sortes de superpositions. Vous souhaitez probablement que le logo soit stylisé de la sorte :

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

Remarque : la position absolue a ses excentricités. Vous devrez probablement expérimenter un peu, mais il ne devrait pas être trop difficile de faire ce que vous voulez.

Answer 4

À l'aide de CSS, vous définissez la position absolue de la division logo et l'ordre z pour qu'elle soit au-dessus de la deuxième division.

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

Answer 5

Si vous souhaitez que le logo prenne de la place, il est probablement préférable de le faire flotter à gauche, puis de déplacer le contenu vers le bas en utilisant la marge, comme ceci :

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

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

ou la marge que vous souhaitez.