z-index utile dans mon cas ?

Bonjour à tous,
J'ai fais un petit contact form et j'aimerais qu'il passe par dessus mon image bg_avtfooter de manière à donner un fond sur toute la partie avant footer, de manière à y disposer des éléments en tout genre (conbtact form, recent posts...).
Je me bat depuis un moment avec le classique z-index mais je n'arrive pas à comprendre le fonctionnement et mes tentatives sont vaines.
Y a t-il une autre solution ?
Je remercie d'avance celui ou celle qui me fera avancer
Voici mon code html

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
 
        ..........................................................je vous passe le doctype et tout.......
 
    <!--MON SLIDER-->
 
    </head>
 
<body>
 
  <!--header-->
    <header id="entete">
            <div class="bloccentre"> <!--bloc centré-->
            <nav id="menu_gauche">
                    <ul>
                        <li><a href="#" title="accueil">ACCUEIL</a></li>
                        <li><a href="#" title="présentation">PRESENTATION</a></li>
                        <li><a href="#" title="nos packs">NOS  PACKS</a></li>
                    </ul>
            </nav> 
 
            <a id="logo" href="index.php" title="accueil"><img src="images/logo.png" alt="logo"/></a>
 
            <nav  id="menu_droit">
                    <ul>
                        <li><a href="#" title="dossiers">DOSSIERS</a></li>
                        <li><a href="#" title="contact">CONTACT</a></li>
                        <li><a href="#" title="espace client">LOGIN  CLIENT</a></li>
                    </ul>    
            </nav>
            </div> <!--fin bloc centré-->
 
    </header> <!--fin header-->
 
 
    <div id="slider">
    <img src="images/slider.jpg" alt="gggg"/>
    </div>
 
<div class="bloccentre"> <!--bloc centré-->
<div class="services-box">
        <section class="one">
            <h1>logotype</h1>
            <p>On sait depuis longtemps que travailler avec du texte lisible et contenant du sens est source de distractions, et empêche de se concentrer sur la mise en page elle-même.</p>
            <a href="#">more <span>&raquo;</span></a>
        </section>
        <section class="two">
            <h1>supports papier</h1>
            <p>On sait depuis longtemps que travailler avec du texte lisible et contenant du sens est source de distractions, et empêche de se concentrer sur la mise en page elle-même..</p>
            <a href="#">more <span>&raquo;</span></a>
        </section>
        <section class="three">
            <h1>developpement web</h1>
            <p>On sait depuis longtemps que travailler avec du texte lisible et contenant du sens est source de distractions, et empêche de se concentrer sur la mise en page elle-même.</p>
            <a href="#">more <span>&raquo;</span></a>
        </section>
 
</div>
</div><!--fin bloc centré-->
 
<div id="avantfooter"><!--div avt footer-->
    <img src="images/bg_avtfooter.jpg" alt="gggg"/>
 
    <div class="bloccentre"><!--bloc centré-->
        <div class="divform">
        <!--MON CONTACT FORM-->
        <form method="post" action="traitement_formulaire.php">
 
            <label>Name</label>
            <input name="name" placeholder="...">
 
            <label>Email</label>
            <input name="email" type="email" placeholder="...">
 
            <label>Message</label>
            <textarea name="message" placeholder="..."></textarea>
 
            <label>*Combien font 2+2 ?</label>
            <input name="human" placeholder="...">
 
            <input class="submit" id="submit" name="submit" type="submit" value="Submit">
 
        </form>
        </div>
    </div><!--fin bloc centré-->
 
</div><!--fin div avt footer-->
 
 
<div id="footer">
<p>On sait depuis longtemps que travailler avec du texte lisible et contenant du sens est source de distractions, et empêche de se concentrer sur la mise en page elle-même.</p>
</div>
 
</body>
</html>

puis mon 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
/*----------MON CONTACT FORM-------------------------------------*/
#avantfooter img {
width:100%;
margin-left: auto;
margin-right: auto;
float:left;
z-index:1;
}
 
label {
    display:block;
    margin-top:10px;
    text-align:left;
    font-size:10px;
}
 
/* Centre the form within the page */
form {
    margin:0 0 35px 0;
    width:200px;
float:left;
    bottom:465px;
    z-index:2;
}
 
/* Style the text boxes */
input, textarea {
    width:200px;
    height:3px;
    background:#efefef;
    border:1px solid #dedede;
    padding:10px;
    font-size:10px;
 
    color:#3a3a3a;
}
 
textarea {
    height:80px;
    font-size:10px;
 
}
.submit{
margin-top:10px;
padding-bottom:20px;
width:130px;}
 
 
/*----------PIED DE PAGE-------------------------------------*/
#footer {
padding-left:120px;
padding-top:20px;
height:20px;
float:left;
width:100%;
background-color:black;
color:white;
text-align:left;
}
#footer p{
    font-size: 12px;
    height:40px;
}