Positionner block sur une image ?

**yassin123441** · 07/05/2013, 15h18

Bonjour à tout le monde,

Mon problème est que je ne peux pas mettre mon block div sur une image. L'image est toujours sur le block malgré le changement du z-index.

Voici le code css de l'image et mon 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
#div-contenu {
 float:right;
 width:300px;
 height:400px;
 background-color:#7081D5;
 z-index:3000;
}
 
img{
 position:absolute;
 top:0;
 right:0;
 width:300px;
 height:400px;
 z-index:1;
}

Code html :

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

1
2
3
<div id=div-1b >
	<img src="/Nexus.png" alt="Kooaburra"  width="300" height="400">
</div>

**rodolphebrd** · 07/05/2013, 17h27

Bonjour,

Z-index ne fonctionne que si tous les éléments sont positionnés.

Attention de ne pas oublier les guillemets pour désigner les Id dans le code Html:
Au lieu de:

Code html :

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

1
2
3
<div id=div-1b >
	<img src="/Nexus.png" alt="Kooaburra"  width="300" height="400">
</div>

Voir:

Code html :

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

1
2
3
<div id="div-1b" >
	<img src="/Nexus.png" alt="Kooaburra"  width="300" height="400">
</div>

Note : Où est la DIV "contenu"? Est-ce "div-1b"?

**yassin123441** · 07/05/2013, 23h09

Je corrige, voici mon code html :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 
<div id="principale" >
<div id="div-1a" >	
<div id=div-1b >
 
		</div>
<div id=div-contenu >
 
		</div>
 
</div>
</div>

Je veux que le div-contenu soit sur le div-1b.

Voici mon code css :

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
#div-1 {
 position:relative;
 top:20;
 left:20;
 width:800px;
 height:800px;
 background-image:url(wall.jpg);
 margin-left: auto;
 margin-right: auto;
 overflow: hidden;
}
#div-1b {
 
 right:10px
 background-color:#000000;
 background-image:url(Nexus.png);
 position:absolute;
 top:150px;
 width:300px;
 height:400px;
 z-index:1;
 background-repeat:no-repeat;
 right:10px
}
#div-1a {
 position:absolute;
 top:150px;
 left:10px;
 width:500px;
 overflow: hidden;
}
 
#div-contenu {
 display:block;
 top:150px;
 float:right;
 width:300px;
 height:400px;
 z-index:2;
 right:10px
 background-color:#000000;
}

**rodolphebrd** · 07/05/2013, 23h42

J'ai corrigé tout votre code:
- comme je vous le disais : mettre des guillemets pour les ID dans le code Html
- mettre des unités aux top et left;
- éviter de doubler les propriétés comme right;
- display: block pour un élément déjà block ne sert à rien;
- organiser le code css de manière cohérente et structurée: déclarer de la même manière sur chaque élément;
- préparer votre code correctement car j'essaye de vous déchiffrer:
-j'imagine que DIV-1 est "principale"

Code html :

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
<head>
<!-- Rajouter en PhP le nom de l'utilisateur -->
<meta charset="utf-8" />
<title>Suivi des AO: Consultation</title>
<style>
#principale {
        width: 800px;
        height: 800px;
        margin-left: auto;
        margin-right: auto;
        background: pink;
}
#div-1a {
        position: relative;
        width: 500px;
        height:100%;
        background: red;
        border:1px solid red;
}
#div-1b {
        position: absolute;
        top: 150px;
        width: 300px;
        height: 400px;
        z-index: 10;
        background:blue;
}
#div-contenu {
        position: absolute;
        top: 150px;
        width: 300px;
        height: 400px;
        z-index: 20;
        background:gray;
}
</style>
</head>
<body>
<div id="principale">
    <div id="div-1a">
     <div id="div-1b"></div>
     <div id="div-contenu"></div>
  </div>
</div>
</body>
</html>

**yassin123441** · 08/05/2013, 00h04

Merci beaucoup , ça m'a beaucoup aidé.

Positionner block sur une image ?

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager