web-dev-qa-db-fra.com

Comment obtenir des div qui se chevauchent avec des positions relatives?

Je veux que quelques divs soient positionnés les uns à côté des autres, mais leur permette également de chevaucher le div précédent.

Ce que j'essaie d'obtenir, c'est une chronologie avec des divs pour des événements d'une certaine durée. Les événements peuvent se chevaucher.

Mon idée était de donner à chaque div la même position supérieure, un z-index croissant et une position gauche croissante (en fonction de l'heure de l'événement). Plus tard, je ferais apparaître des divisions individuelles par des événements survolés pour visualiser le chevauchement.

Ce que je fais, c'est que chaque div soit placé sous le suivant. En jouant avec l'attribut supérieur, je peux les aligner horizontalement, mais je ne vois pas le motif.

 <div class="day">
         <div style="top: 35px; left: 200px; background-color: red; height: 50px; width:24px; z-index: 1; position: relative;"> </div>
         <div style="top: 35px; left: 220px; background-color: green; height: 50px; width:24px; z-index: 2; position: relative;"> </div>
         <div style="top: 35px; left: 225px; background-color: blue; height: 50px; width:48px; z-index: 3; position: relative;"> </div>
 </div>

Si j'utilise des positions absolues, les éléments volent hors de la div environnante et sont positionnés absolument à un certain endroit dans la page.

csshtmllayercss-position
28
TilmanBaumann

C'est simple. Faire un div intérieur en utilisant positionnement absol mais enveloppé avec un div qui utilise positionnement relatif:

<div id="container" style="position: relative;width:200px;height:100px;top:100px;background:yellow">
    <div id="innerdiv1" style="z-index: 1; position:absolute; width: 100px;height:20px;background:red;">a</div>
    <div id="innerdiv2" style="z-index: 2; position:absolute; width: 100px;height:20px;background:blue;left:10px;top:10px;"></div>
</div>

Vous pouvez utiliser une autre méthode comme la marge négative, mais ce n'est pas recommandé si vous souhaitez modifier dynamiquement le HTML. Par exemple, si vous souhaitez déplacer la position des divisions internes, définissez simplement les propriétés CSS haut/gauche/droite/bas du conteneur ou modifiez les propriétés à l'aide de JavaScript (jQuery ou autre).

Il gardera votre code propre et lisible.

36
Mahendra Mustika Wijaya

Utilisez des marges négatives!

<div class="day">
    <div style="top: 35px;left: 200px; background-color: red; height: 50px; width:24px; z-index: 1; position: relative; margin-top: -15px;"> </div>
    <div style="top: 35px;left: 220px; background-color: green; height: 50px; width:24px; z-index: 2; position: relative; margin-top: -15px;"> </div>
    <div style="top: 35px;left: 225px; background-color: blue; height: 50px; width:48px; z-index: 3; position: relative; margin-top: -15px;"> </div>
</div>

Violon: http://jsfiddle.net/vZv5k/

Une autre solution:

Donner la .day classe a width, height et position it relatively, en conservant le divs absolutely positioned.

Découvrez ci-dessous [~ # ~] css [~ # ~] :

.day {position: relative; width: 500px; height: 500px;}

Et le [~ # ~] html [~ # ~] :

<div class="day">
    <div style="top: 35px;left: 200px; background-color: red; height: 50px; width:24px; z-index: 1;"> </div>
    <div style="top: 35px;left: 220px; background-color: green; height: 50px; width:24px; z-index: 2;"> </div>
    <div style="top: 35px;left: 225px; background-color: blue; height: 50px; width:48px; z-index: 3;"> </div>
</div>
31
Praveen Kumar Purushothaman

J'ai trouvé la solution. C'est probablement aveuglément évident pour quiconque connaît le CSS.

Je pensais que je ne pouvais pas utiliser le positionnement absolu car mes éléments volaient hors de la div environnante.

Il s'avère que j'ai mal compris le positionnement absolu. Ce n'est pas la même chose que fixe, mais pour moi, ça ressemblait à ça.

https://developer.mozilla.org/en-US/docs/CSS/position l'explique bien.

Positions de positionnement absolues absolument à la prochaine ancre environnante. Cela revient par défaut à la page entière, si aucune autre ancre n'est définie. Pour faire quelque chose une ancre, il faut qu'elle soit positionnée: relative;

Solution rapide

ajoutez position: relative; à la classe de jour et utilisez le positionnement absolu dans la division intérieure.

9
TilmanBaumann

Avec l'attribut top, vous pouvez également déplacer des objets relativement positionnés. Dans mon exemple de code, la boîte rouge chevauche la boîte verte en raison de son z-index. Si vous supprimez le z-index, la boîte verte est en haut.

HTML:

<div class="wrapper">
  <div class="box one"></div>
  <div class="box two"></div>
</div>

CSS:

.wrapper {
  width: 50px;
  height: 50px;
  overflow: hidden;
}

 .box {
  width: 100%;
  height: 100%;
  position: relative;
}

 .box.one {
  background-color: red; 
  z-index: 2;
  top: 0px;
}

 .box.two {
  background-color: green; 
  z-index: 1;
  top: -50px;
}
4
Benny Neugebauer