Comment feriez-vous le chevauchement de deux <div>?

154

J'ai besoin de deux divs pour ressembler un peu à ceci:

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

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


la source

Réponses:

88

Je pourrais l'aborder comme ça (CSS et 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>

Owen
la source
2
existe-t-il un moyen de créer du contenu en évitant simplement l'espace utilisé par le logo?
Javier
1
hmm pouvez-vous clarifier? Je suppose que cela signifie que vous voulez juste le logo au-dessus du contenu? si c'est le cas, ce n'est qu'un flux normal de divs (supprimez donc gauche, haut, position de #logo). J'ai le sentiment que tu veux dire autre chose! :)
Owen
2
Je pense que ce qui était censé être que le contenu (texte) entoure le logo
Davy8
2
ah hmm, je suis sûr que non. le problème étant qu'un élément peut être flotté, ou positionné, mais pas les deux. jusqu'à ce qu'ils développent une sorte de flotteur: idée centrale ...
Owen
88

Utilisez simplement des marges négatives, dans la deuxième division, dites:

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

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

TravisO
la source
9
C'est de loin la méthode la plus simple, et peut facilement être adaptée pour les pieds de page qui se chevauchent en utilisant margin-bottom sur le contenu d'une page. Merci!
Peter DeWeese
1
cette solution semble dépendre de DOCTYPE, n'est-ce pas? car cela ne fonctionnait pas avec HTML5 DOCTYPE lorsque j'ai essayé.
alumi
2
Cela devrait être la réponse acceptée, la position absolue a tendance à poser des problèmes.
Dmitriy
5

Avec un positionnement absolu ou relatif, vous pouvez faire toutes sortes de chevauchements. Vous souhaitez probablement que le logo soit conçu comme tel:

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.

sblundy
la source
1
Cela ferait-il en sorte que le logo chevauche le texte où se trouvent les liens? Ou est-ce que cela pousserait les liens sur le côté?
1
Non, absolu supprime efficacement la balise du flux. Ce serait comme si ce n'était pas là.
sblundy
2

À l'aide de CSS, vous définissez le logo div sur la position absolue et définissez l'ordre z au-dessus du deuxième div.

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

Si vous voulez que le logo prenne de la place, vous feriez probablement mieux de le faire flotter à gauche, puis de le déplacer vers le bas en utilisant la marge, un peu comme ceci:

#logo {
    float: gauche;
    marge: 0 10px 10px 20px;
}

#contenu {
    marge: 10px 0 0 10px;
}

ou quelle que soit la marge souhaitée.

jishi
la source