Πρόβλημα με CSS και z-index

[anvasila]

Γεια σας,

Θα ήθελα λίγη βοήθεια με έναν κώδικα που προσπαθώ να βγάλω, αλλά αντιμετωπίζω πρόβλημα με το z-index. Για κάποιο λόγο το z-index δεν έχει το σωστό αποτέλεσμα και δε μπορώ να καταλάβω για ποιον λόγο. Απ'ότι διάβασα από εδώ και από εκεί υποθέτω ότι είναι κάποιο θέμα με τα child elements αλλά από την στιγμή που στο parent δε βάζω κάποιο z-index στο child δε μπορώ να βάλω ότι z-index θέλω?

To αποτέλεσμα που βγάζω είναι αυτό που φαίνεται εδώ: http://louki.gr/catalog/cocktails.html , αλλά όπως βλέπεται όταν γίνεται hover με το ποντίκι η κάθε εικόνα δεν εμφανίζεται πάνω απ' όλες τις άλλες, όπως θα έπρεπε σύμφωνα με τα z-index που έχω βάλει....αλλά πάει σύμφωνα με το ποια φορτώθηκε τελευταία. Με λίγα λόγια θέλω το hover να εμφανίζεται πάνω από ΌΛΑ...

CSS CODE :

    #cocktails-rule{
        width:100%;height:500px;position:static;margin:auto;display:block;overflow:visible;
    }
    
    .container{
		width:33%;height:100%;-webkit-perspective:1000;perspective:1000;-moz-perspective:1000;
	}
	.card{
		position:absolute;
		width:100%;
		height:100%;
		-webkit-transform-style: preserve-3d;
		-webkit-transition:1.5s, -webkit-transform 1.5s;
	    -moz-transform-style: preserve-3d;
		-moz-transition:1.5s;
		transform-style: preserve-3d;
		transition:1.5s;
	}
	.container:hover .card{
		display:block;
		position:absolute;
		z-index:1003;
		width:200%;
		height:200%;
		-webkit-transform: translate(60px, -120px) rotate(-5deg) rotateY(360deg);
		transform: translate(60px, 0px) rotate(-5deg) rotateY(360deg);
		-mox-transform: translate(60px, 0px) rotate(-5deg) rotateY(360deg);
		}
		
	.cocktail1{
		position:absolute;
		float:left;top:30px;left:20px;
		-webkit-transform: rotate(5deg);
		-moz-transform: rotate(5deg);
		-ms-transform: rotate(5deg);
		transform: rotate(5deg);
	}
	

	.cocktail2{
		position:absolute;
		float:left;top:30px;left:35%;
		-webkit-transform: rotate(-10deg);
		-moz-transform: rotate(-10deg);
		-ms-transform: rotate(-10deg);
		transform: rotate(-10deg);
	}
	.cocktail3{
		position:absolute;
		float:left;
		top:30px;left:65%;
		-webkit-transform: rotate(10deg);
		-moz-transform: rotate(10deg);
		-ms-transform: rotate(10deg);
		transform: rotate(10deg);
	}

HTML CODE:

<div id="cocktails-rule">
	<div class="container  cocktail1">
	<div class="card">
		<img src="http://louki.gr/images/prodacts/cocktails/lemon-pie.jpg" />
	</div>
	</div>
    <div class="container cocktail2">
    <div class="card">
		<img src="http://louki.gr/images/prodacts/cocktails/spicy-baba.jpg" />
	</div>
	</div>
	<div class="container cocktail3">
    <div class="card">
		<img src="http://louki.gr/images/prodacts/cocktails/coktails3.jpg" />
	</div>
	</div>
</div>

Αν έχει κάποιος το κουράγιο να το κοιτάξει και να προτείνει κάτι θα του ήμουν υπόχρεος...

[axxis]

Για κάποιο λόγο, αν βγάλεις το z-index από το .container:hover .card και το βάλεις μόνο του σε ένα .container:hover σε εμένα δουλεύει.

Το γιατί δεν μπορώ να το καταλάβω.

[anvasila]

Για κάποιο λόγο, αν βγάλεις το z-index από το .container:hover .card και το βάλεις μόνο του σε ένα .container:hover σε εμένα δουλεύει.

Το γιατί δεν μπορώ να το καταλάβω.

Δε φαντάζεσαι πόσο πολύ σε ΛΑΤΡΕΥΩ αυτή τη στιγμή. Έχω φάει μισή μέρα μόνο και μόνο γι' αυτό το πράμα. Axxis δεν έχω λόγια πραγματικά. Ευχαριστώ πολύ φίλε. Problem solved αν και θα ήθελα να καταλάβω και το γιατί δουλεύει μόνο έτσι...είναι περίεργο το z-index και δε του φαινότανε αρχικά...

[xcyanx]

Μπορείς να τον κεράσεις ένα καφέ για να βγάλεις την υποχρέωση :P

- - - Updated - - -

Και κάτι άλλο άσχετο που ίσως θες να το κοιτάξεις...Αν κάνεις hover σε μία κάρτα πλέον δουλεύει κανονικά αλλά αν σταματήσεις να κάνεις hover το πρόβλημα ξαναεμφανίζεται μέχρι να πάει στην αρχική της θέση.

[axxis]

Problem solved αν και θα ήθελα να καταλάβω και το γιατί δουλεύει μόνο έτσι...είναι περίεργο το z-index και δε του φαινότανε αρχικά...

Και εγώ πολύ θα ήθελα να καταλάβω γιατί γίνεται αυτό...

Στην τύχη το βρήκα δοκιμάζοντας διάφορες αλλαγές στον κωδικά σου.

Αν καταλάβεις τον λόγο, γράψτο και εδώ.

[nikospara]

Υπάρχει αυτό που εξηγεί λεπτομερώς τα περί z-index:
http://philipwalton.com/articles/wha...about-z-index/