web-dev-qa-db-fra.com

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

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

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

Quelle est la manière la plus élégante/élégante de les faire se chevaucher? Le logo aura une hauteur et une largeur fixes et touchera le bord supérieur de la page.

csshtmloverlap
145
st elmos fire

Je pourrais l'approcher 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>
82
Owen

Il suffit d'utiliser 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.

76
TravisO

Avec le positionnement absolu ou relatif, vous pouvez faire toutes sortes de chevauchements. Vous souhaitez probablement que le logo soit ainsi appelé:

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.

4
sblundy

Si vous voulez que le logo prenne de la place, vous ferez probablement mieux de le faire flotter à gauche puis de descendre le contenu à l'aide de la marge, un peu comme ceci:

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

ou quelle que soit la marge que vous voulez.

1
jishi

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

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