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

**Neckara** · 07/07/2014, 17h42

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

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

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.

**Neckara** · 07/07/2014, 17h51

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}