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.

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>

Développer l'extrait

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

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

Réponses: