Superposition entre Div et img

Version imprimable

14/09/2012, 11h17
zooffy

Superposition entre Div et img

Bonjour à tous.

Je suis confronté à un souci que j'ai du mal à saisir, certainement du au fait que je ne maitrise pas le CSS à fond.

Je programme un site en ASP.NET avec l'utilisation des contrôles utilisateur.
J'ai donc un contrôle utilisateur qui gère un bloc personnalisé avec des images et le menu de navigation. Dans ce bloc j'ai pas mal d'image que j'ai positionné avec le z-index.

Juste en dessous j'ai un autre contrôle utilisateur et je voudais qu'il soit par dessus l'image qui débrode vers le bas du bloc personnalisé.
Donc j'ai une image dans le bloc avec un Z-index à 1000 et dans mon deuxième contrôle utilisateur j'ai mis un z-index à 2000 sur un div qui a contient un background image.

Mais ce div reste en dessous et je sais pas quoi faire.

Et en plus, je ne sais pas trop comment vous fournir du code pour illustrer tout ça et en plus j'ai une clause de confidentialité qui m'empêche de vous donner un lien, vraiment désolé.

Si vous avez une idée, merci d'avance.
14/09/2012, 11h33
NoSmoking

Bonjour,
la propriété z-index ne s'applique qu'à des éléments positionnés, http://torgar.developpez.com/glossai...ent.php#zindex
14/09/2012, 11h47
zooffy

Merci pour ton aide.

Est ce que je dois déduire de cette doc que le div n'est pas un élément positionné ?
Ou est ce que je dois mettre une Position sur mes div ?
14/09/2012, 11h54
FirePrawn

Bonjour,

Un extrait de ton code permettrait de t'aider plus facilement ;)

il est vrai que sans code cela va être difficile de t'aider efficacement.
Je te mets un petit exemple à manipuler pour voir à quoi on peut arriver, dans l'exemple il y a un rendu aberrant.

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
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[z-index]</title>
<style>
div{
  border:1px solid #808080;
  width:100px;
  height:100px;
}
#div1{
  background-color:#e0e0e0;
}
#img1{
  position:relative;/* à mettre en commentaire pour test */
  z-index:100;
}
#div2{
  position:absolute;
  background-color:#fee0e0;
  top:50px;
  left:50px;
  z-index:10;
}
</style>
</head>
<body>
  <div id="div1">
    <img id="img1" src="http://web.developpez.com/faq/theme/images/mini_logo_faq_xhtml.gif">
  </div>
  <div id="div2">
    <img id="img2" src="http://web.developpez.com/faq/theme/images/mini_logo_faq_css.gif">
  </div>
</body>
</html>

il est important de mettre le z-index sur le conteneur et non sur un élément de celui ci.

14/09/2012, 20h00
zooffy

Je sais que c'est pas simple sans code, mais je ne peux pas sinon, je poste une dizaine de fichier, c'est le principe des controlUser en .NET, on peut morceler le code.

Mais bon, ça m'a bien aider tout de même, pas l'exemple de code, je viens juste de le découvrir, mais mes supositions.

Je suis parti du principe que j'avais bon et j'ai réussi à mettre tout dans le bon ordre.
Maintenant j'ai des effets de bord avec d'autres trucs qui se retrouve en dessous, mais là, faut que je plonge pour trouver els bon DIV, j'en ai dans tous les sens.

Merci à vous et bon week-end.