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;
	}

Såvitt jag vet så ordnas containers (eller vad det nu är för element du använder) efter z-index när sidan laddas. När den väl gjort det, så kan inte ordningen ändras (såvida du inte tar till nåt finurligt knep med ajax eller nåt - om det ens går då).

Om jag har rätt i mitt antagande så är din idé således dödfödd från början, tyvärr.

(F.ö. tycker jag inte du ska lägga särskilt mycket krut på en meny. Den är faktiskt ointressant och det räcker med att den funkar. För 10 år sen höll man ofta på så innihelvete med att skapa "coola" menyer, men insåg så småningom hur korkat det var. Det är webbplatsens innehåll som man ska jobba med. Följaktligen har många mycket framgångsrika webbplatser numer bara vanliga länkar i sina menyer. Det fungerar alldeles utmärkt!)

http://www.w3schools.com/Css/pr_pos_z-index.asp
http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/ intressant läsning om z index

Du måste ange position för att z index skall funka
sägs det på alla sidor som jag kollad lite snabbt efter google sökning. Tag sen jag jobbade med css

Buddaz skrev:

Tag sen jag jobbade med css

:OO :OO :e :e

Jag har lyckas lösa detta nu :)

Mycodez skrev:

Jag har lyckas lösa detta nu :)

Om du kan så vore det ju bussigt om du kunde beskriva hur du löste det. Då kan folk med samma problem kanske få hjälp.