div {
	background-color: red;
}

#carre1{
	top:0%;
    left:0%;
    height: 20%;
    width: 20%;
    position:fixed;
}

#carre2{
    top:40%;
    left:0%;
    height: 20%;
    width: 20%;
    position:fixed;
}

#carre3{
    top:80%;
    left:0%;
    height: 20%;
    width: 20%;
    position:fixed;
}

#carre4{
    top:0%;
    left:40%;
    height: 20%;
    width: 20%;
    position:fixed;
}

#carre5{
    top:0%;
    left:80%;
    height: 20%;
    width: 20%;
    position:fixed;
}

#carre6{
    top:40%;
    left:40%;
    height: 20%;
    width: 20%;
    position:fixed;
}

#carre7{
    top:0%;
    left:0%;
    height: 20%;
    width: 20%;
    position:fixed;
}

#carre8{
    top:40%;
    left:80%;
    height: 20%;
    width: 20%;
    position:fixed;
}

#carre9{
    top:80%;
    left:40%;
    height: 20%;
    width: 20%;
    position:fixed;
}

#carre10{
    top:80%;
    left:80%;
    height: 20%;
    width: 20%;
    position:fixed;
}

#carre11{
    top:20%;
    left:20%;
    height: 20%;
    width: 20%;
    position:fixed;
}

#carre12{
    top:60%;
    left:20%;
    height: 20%;
    width: 20%;
    position:fixed;
}

#carre13{
    top:20%;
    left:60%;
    height: 20%;
    width: 20%;
    position:fixed;
}

#carre14{
    top:60%;
    left:60%;
    height: 20%;
    width: 20%;
    position:fixed;
}