Positionner un élément relativement à son parent (non-positionné)

Version imprimable

Bonjour,

Je chercher actuellement à afficher une image par dessus une autre mais sans succès.
En effet, bien que je connaisse l'attribut z-index en CSS, je n'arrive pas à faire faire en sorte que ma seconde image ai une bonne position.
Code:

1 2 3 <img src="http://www.developpez.net/forums/images/bandeau_background.png" alt="bandeau" id="bandeau"> <img src="http://www.developpez.net/forums/images/bandeau_logo.png" alt="bandeau_logo" id="bandeau_logo" /> </img>
bandeau_background est donc l'élément parent de bandeau_logo.
Code:

1 2 3 4 5 6 7 8 9 10 #bandeau { display : block; margin-left: auto; margin-right: auto; width: 982px; } #bandeau_logo { # ????? }
Malheureusement les positionnements CSS ne m'aident pas trop :

static : on ne peut pas modifier la position
relative : changement de position par rapport à la position initiale mais la place initiale de l'élément déplacé est toujours "réservée"
fixed : l'élément ne bougera pas même si on scroll
absolute : positionnement relatif par rapport au premier élément positionné or bandeau n'est pas positionné

Suis-je obligé de passer par du JavaScript pour tenter de modifier la position absolute de bandeau_logo par rapport à celle de bandeau ?
Ou pensez-vous qu'il existe des balises HTML qui pourraient m'aider ?

07/07/2014, 17h46
Bisûnûrs

Une image est une balise auto-fermante, donc ne peut rien englober, pas même une autre image. Dans ton cas, le navigateur verra juste deux images, l'une à la suite de l'autre, sans aucune parente de l'autre.

Problème résolu grâce à Bisûnûrs :

Code:

1
2
3
4
<div id="bandeau">
    <img src="http://www.developpez.net/forums/images/bandeau_background.png" alt="bandeau_background" id="bandeau_background"/>
    <img src="http://www.developpez.net/forums/images/bandeau_logo.png" alt="bandeau_logo" id="bandeau_logo" />
<div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#bandeau {
    position : relative;
    margin-left: auto;
    margin-right: auto;
    width: 982px;
}
 
#bandeau_background {
    display : block;
}
 
 
#bandeau_logo {
    position : absolute;
    top : 7px;
    left : 2px;
}

07/07/2014, 17h53
Bisûnûrs

Tu feras attention, dans ton nouveau code, tu as deux éléments qui ont un id bandeau.
07/07/2014, 17h57
Neckara

Merci :ccool:

J'ai corrigé ma solution