Superposer deux divs

Version imprimable

Bonjour,

Cela me paraissait simple de prime abord, mais je suis incapable de disposer, en haut à droite par exemple, mon div coordexterne sur le div map.
J'ai essayé entre autre, les deux positions absolute et z-index 1 et 2 mais ca ne fonctionne pas :?
Une idée ?
Je vois bien mon bloc coordexterne...juste le temps que map le recouvre !:aie: i.e. il disparait dessous.
Merci

html:
Code:

1 2 3 4 5 <body> <div id="map" class="map"> <div id="coordexterne" ></div> </div> </body>
css:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 body{ margin-left: auto; margin-right: auto; /*display: block;*/ position: float ; width: 1100; height: 90%; } #coordexterne { font-family: Verdana ; font-size: 10px; text-align: right ; width: 250px; height: 15px ; line-height: 10px; /*permet de baisser le texte dans le bloc*/ position: absolute ; box-shadow: 10px 10px 5px #888888; /*display: inline ;*/ background-color: #6190FB ; float: right; map {/*class map*/ border: 2px solid black; }

13/10/2014, 17h41
Muchos
Votre code tel quel ne permet pas de reproduire votre problème.

En outre :
- il manque le signe # devant map;
- je ne comprends pas la combinaison "float" avec "position:absolute".
14/10/2014, 08h08
Leehan

1 pièce(s) jointe(s)

effectivement il y avait redondance entre id=map et class=map (qu'on en voit pas dans mon extrait de code). C'est corrigé. Merci

Quant à la combinaison float/position, elle est le résultat de multiples essais et d'une méconnaissance du comportement exact de ces deux parametres.

Et je n'arrive pas a faire cela :
Pièce jointe 158678

merci
15/10/2014, 16h53
Muchos

Vous avez l'explication de votre problème dans notre FAQ CSS.
22/10/2014, 10h19
Leehan

oui merci, j'avais vu et j'ai appliqué ce qui est proposé.
Cependant, j'ai l'enfant en dessous du parent...c'est cela que je n'arrive pas à regler.
on ne voit pas l'enfant.
23/10/2014, 13h50
Muchos

Peut-être avez-vous mal appliqué la solution, ou bien vous n'avez pas communiqué tout le code.

Voici une démo en ligne de la solution.