problem med z-index hjälp tack

Tjena
Jag håller på med att bygga en snygg meny då har jag så det ser ut som ligger över lappar varandra men sen när man över hovar över så ska bilden så ska den bilden som man hovar på komma över alla andra bilder fast på samma plats men vad har jag gjort för fel??

när man inte hovar över så det ut såhär:

när man hovar över ser det ut så ser det ut :

men alltså den bilden som ligger till höger ligger fortfarande över den menybilden till vänster det ska det inte göra kan ni hjälpa mig med detta

css-koden till alla 4 olika knappar ser ut så hära

@charset "utf-8";
/* CSS Document */

.knapp {
	background-image:url(../images/vit.png);
	float: left;
	height: 24px;
	width:180px;
	margin-left:15px;
	padding-top:20px;
	text-align:center;
	z-index:auto;
	}
.knapp:hover {
	background:url(../images/vit-hover.png);
	float: left;
	height: 24px;
	width:180px;
	margin-left:15px;
	padding-top:20px;
	text-align:center;
	z-index:1;
	}

.knapp-2 {
	background:url(../images/vit.png);
	width:180px;
	height:24px;
	float:left;
	margin-left:-50px;
	text-align:center;
	padding-top:20px;
	z-index:auto;
	}
	
.knapp-2:hover {
	background:url(../images/vit-hover.png);
	width:180px;
	height:24px;
	float:left;
	margin-left:-50px;
	text-align:center;
	padding-top:20px;
	z-index:1;
}
.knapp-3 {
	background:url(../images/vit.png);
	width:180px;
	height:24px;
	float:left;
	margin-left:-50px;
	text-align:center;
	padding-top:20px;
   	z-index:auto;
	}
	
.knapp-3:hover {
	background:url(../images/vit-hover.png);
	width:180px;
	height:24px;
	float:left;
	margin-left:-50px;
	text-align:center;
	padding-top:20px;
	z-index:1;	
	}
.knapp-4 {
	background-image:url(../images/rod-11.png);
	float: left;
	height: 24px;
	width: 180px;
	padding-top:20px;
	text-align:center;	
	margin-left:-50px;
	z-index:auto;
}

.knapp-4:hover{
	background:url(../images/rod-hoverr.png);
	float: left;
	height: 24px;
	width: 180px;
	z-index:1;
	margin-left:-50px;
	padding-top:20px;
	text-align:center;
	}