Une carte en image dynamique

[christouphe]

il faut leur mettre un z-index différent sinon elles (les DIV) sont toute dans le même plan Z, un peu comme si tu voulais faire chevaucher 2 planches de bois en fait. Là elles sont "côte-à-côte"

Code :

#map{
margin:auto;
width:470px;
height:470px;
background-image:url(images/map.png);
z-index: 0; //raz-du-sol
}

#pisteavion{
position:relative;
top:120px;
left:10px;
z-index: 1; //un peu au dessus du sol
}

#pisteheli{
position:relative;
top:50px;
left:200px;
z-index: 1;
}

#tdc{
position:relative;
top:100px;
left:300px;
z-index: 1; //je le mets à 1 mais je sais pas ce que c'est.
}

#caserne{
position:relative;
top:0px;
left:100px;
z-index: 1;
}

//Un hélicoptère peu survoler les bâtiments, par exemple...
#helicoptere{
position:relative;
top:0px;
left:100px;
z-index: 2;
}
Ensuite le code sur la page html

<div id="map">
<div id="pisteavion"></div>
<div id="pisteheli"></div>
<div id="tdc"></div>
<div id="caserne"></div>
<div id="helicoptere"></div>
</div>

Un lien utile: http://www.alsacreations.com/astuce/lire...index.html

voilà qui répondra à tes questions :

Un exemple pour la route

Soit le code HTML suivant:


<div id="test1">...</div>
<div id="test2">...</div>
<div id="test3">...</div>
<div id="test4">...</div>

et le code CSS suivant:


div {height: 100px; width: 100px;}
div#test1 {position: absolute; z-index: 4;}
div#test2 {position: absolute; z-index: 2;}
div#test3 {z-index: 10;}
div#test4 {position: relative; z-index: 8;}

Le résultat attendu est le suivant:

* div#test1 sera au premier plan;
* en dessous on aura div#test2;
* en dessous encore on aura div#test3 (qui ne se place pas au-dessus malgré un z-index de 10 car il n'est pas positionné);
* enfin, div#test4 sera le plus haut de la pile, mais ne recouvre pas les autres blocs ici car il est repoussé vers le bas par div#test3 qui n'est pas positionné.

Au final, si tous les blocs ont une couleur de fond opaque, on ne pourra apercevoir que div#test1 en haut et div#test4 plus bas. Les autres blocs sont recouverts par div#test1.