Afficher un div au-dessus d'un autre

Question

J'ai du HTML avec deux div :

 <div>
  <div id="backdrop"><img alt="" src='/backdrop.png' /></div>
  <div id="curtain" style="background-image:url(/curtain.png);background-position:100px 200px; height:250px; width:500px;">&nbsp;</div>
</div>

Je veux que le deuxième div #curtain apparaisse au-dessus du div #backdrop . Les deux div ont la même taille, mais je ne sais pas comment positionner le deuxième div l'un sur l'autre.

Answer 1

Utilisez CSS position: absolute; suivi de top: 0px; left 0px; dans l' style de chaque DIV. Remplacez les valeurs de pixel par ce que vous voulez.

Vous pouvez utiliser z-index: x; pour définir l'"ordre" vertical (lequel est "en haut"). Remplacez x par un nombre, les nombres supérieurs s'ajoutent aux nombres inférieurs.

Voici à quoi ressemblerait votre nouveau code :

 <div>
  <div id="backdrop" style="z-index: 1; position: absolute; top: 0px; left: 0px;"><img alt="" src='/backdrop.png' /></div>
  <div id="curtain" style="z-index: 2; position: absolute; top: 0px; left: 0px; background-image:url(/curtain.png);background-position:100px 200px; height:250px; width:500px;">&nbsp;</div>
</div>

Answer 2

Il existe de nombreuses façons de le faire, mais cela est assez simple et évite les problèmes de perturbation du positionnement du contenu en ligne. Vous devrez peut-être également ajuster les marges/le remplissage.

 #backdrop, #curtain {
  height: 100px;
  width: 200px;
}

#curtain {
  position: relative;
  top: -100px;
}

Answer 3

Voici le jsFiddle

 #backdrop{
    border: 2px solid red;
    width: 400px;
    height: 200px;
    position: absolute;
}

#curtain {
    border: 1px solid blue;
    width: 400px;
    height: 200px;
    position: absolute;
}

Utilisez le Z-index pour déplacer celui que vous voulez en haut.