Div mauvais décalage.

Bonjour à tous et toutes !

Je cherche à me créer un petit site sur lequel je fais surtout des essais en essayant d'en apprendre un peu plus sur le html et le css.

www.wendigo.fr

Voila j'aimerais avoir une animation avec des nuages qui passent mais mes divs se mettent les une sous les autres et non pas toutes les une sur les autres.

quelqu'un à une idée du problème ?
voila le css sinon sur le site avec examiner vous aurez accès à tous !

Merci !

background: transparent;
 border: 0;
 margin: 0;
 padding: 0;
 vertical-align: baseline;
}
body {
    background-color: #000;
 line-height: 1;
}
h1, h2, h3, h4, h5, h6 {
 clear: both;
 font-weight: normal;
}
ol, ul {
 list-style: none;
}


/* d?but css */

ul li a {
width:100px;
float:left;
display: block;
color:#245b82;
color:black;
text-decoration:none;
text-align:center;
padding:5px;
}


ul li a:hover {
color:#ffe400;
}

#site {
    background: url(images/Fond.png)  no-repeat center;
    z-index: 400;
    position: relative;
    height: 1080px;
    width: 100%;   
}





#f1 {
    background: url(images/f1.png) repeat 5% 5%;
    position: relative;
    z-index: 100;
    height:1080px;
    top: 0; bottom: 0;
    margin-left: auto;
    margin-right: auto;
}

#f2 {
    background: url(images/f2.png) repeat 20% 20%;
    position: relative;
    z-index: 300;
      height:1080px;
    top: 0; bottom: 0;
    margin-left: auto;
    margin-right: auto;
}

#f3 {
    background: url(images/f3.png) repeat 90% 110%;
    position: relative;
    z-index: 200;
      height:1080px;
    top: 0; bottom: 0;
    margin-left: auto;
    margin-right: auto;
}

Salut merci pour ta réponse !

Alors lorsque je passe en absolue ce que j'avais testé, plus rien n'est animé !
(je fais des tests avec l'outil examiner sur firefox).

"Il y aurait d'autres points à voir, comme prendre toute la hauteur d'une page par exemple. Mais ça... ce sera peut-être pour une prochaine question. "

cela m'interresse idem pour la largeur !
merci encore pour ta réponse.