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

anvasila · 30 Ιουλίου 2013

Γεια σας και πάλι,

Θα ήθελα λίγη βοήθεια με έναν κώδικα που προσπαθώ να βγάλω, αλλά αντιμετωπίζω πρόβλημα με το z-index. Για κάποιο λόγο το z-index δεν έχει το σωστό αποτέλεσμα και δε μπορώ να καταλάβω για ποιον λόγο. Απ'ότι διάβασα από εδώ και από εκεί υποθέτω ότι είναι κάποιο θέμα με τα child elements. Αν και δε κατάλαβα τί θέλει να πει ο ποιητής... (http://css-tricks.com/almanac/properties/z/z-index/)

To αποτέλεσμα που βγάζω είναι αυτό που φαίνεται εδώ: http://louki.gr/catalog/cocktails.html

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

Ο κώδικας είναι ο παρακάτω:

<style>

#rt-mainbody {margin:-25px;padding:15px;overflow:visible;}

#cocktails-rule{

width:100%;height:500px;position:static;margin:auto;display:block;overflow:visible;

}

.container{

position:absolute;width:33%;height:100%;-webkit-perspective:1000;perspective:1000;-moz-perspective:1000;

}

.cocktails1{

display:inline;

position:absolute;

z-index:100;

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 .cocktails1{

display:inline;

position:absolute;

z-index:1006 !important;

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;

z-index:10;

float:left;top:30px;left:20px;

-webkit-transform: rotate(5deg);

-moz-transform: rotate(5deg);

-ms-transform: rotate(5deg);

transform: rotate(5deg);

}

.cocktail2{

position:absolute;

z-index:10;

float:left;top:30px;left:35%;

-webkit-transform: rotate(-10deg);

-moz-transform: rotate(-10deg);

-ms-transform: rotate(-10deg);

transform: rotate(-10deg);

}

.cocktail3{

float:left;position:absolute;z-index:10;

top:30px;left:65%;

-webkit-transform: rotate(10deg);

-moz-transform: rotate(10deg);

-ms-transform: rotate(10deg);

transform: rotate(10deg);

}

</style>

<body>

</div>

</div>

</div>

</body>

sougiasdj · 30 Ιουλίου 2013

Καλησπέρα. -1 για το κώδικα της Css μέσα στην html ,-10 που το κάνει αντί για το head στην μέση της.

Γιατι δε δουλεύει το z-index; Γιατί ένα element δε μπορεί να έχει μεγαλύτερο z-index απο το πατέρα του.

Πρακτικά:

<div class="parent">
        <div class="child1">
        </div>
</div>

.parent{z-index:1}
.child{z-index:99}

To child ουσιαστικά δε μπορεί να έχει τιμί πάνω απο "1". Οπότε αφαίρεσαι απ'οπου δε χρειάζεται το z-index (ή και z-index:-1; αλλα δεν είναι καλη τακτική.) και διόρθωσε και τον κωδικά σου γιατι είναι ενα χάος με κλάσεις με σχεδόν ίδιο όνομα που εσυ μπορείς να τις διαβάσεις αλλα για έναν άλλον ειναι χάσιμο χρόνου.

Ελπίζω να κατάλαβες γιατί :hover δε δουλεύει...

anvasila · 31 Ιουλίου 2013

Αρχικά να σου πω ευχαριστώ για την απάντηση και για τον χρόνο σου.

Για τις παρατηρήσεις σου, αυτά τα βάζω προς το παρόν στο άρθρο για testing. Στη συνέχεια θα φορτωθεί στο βασικό αρχείο CSS. Όσο για τον κώδικα το ότι τους κάνω χάος είναι αλήθεια και ελπίζω ότι κάποια στιγμή θα το βελτιώσω...

Τώρα για τα z-index... Έσβησα όλα τα άλλα z-index και κράτησα μόνο αυτά που είναι στο hover αλλά το πρόβλημα παραμένει... πραγματικά ΔΕΝ ΜΠΟΡΩ ΝΑ ΚΑΤΑΛΑΒΩ.... έχω δοκιμάσει τα πάντα, αλλά δε λέει να μου κάνει το χατήρι...

Αυτό δε μου είπες ουσιαστικά? Να σβήσω όλα τα άλλα z-index και να κρατήσω μόνο αυτά στο hover?

SpirosLouis · 31 Ιουλίου 2013

Μια σκέψη:

Δοκίμασε να βάλεις μια κλάση στις εικόνες. whateverclass

Επιπλέον βγάλε όλα τα z-index.

Και δώσε με jquery κάτι σαν το παρακάτω:

$('.whateverclass').on('hover', function(){

this.css(//βάλε το z-index εδώ//)

}

spartakoscs · 8 Αυγούστου 2013

Θα ξεκινήσω να λέω κατευθείαν αυτά που βλέπω !!!

Μου αρέσει αυτό με τα animated carts των cocktails . Πολυ καλό !!

Απαραδεκτο το css να μην είναι μέσα σε ένα css file και να είναι στο main html αρχείο !! Συγύρισε το αμέσως !!! Οσο και πρόχειρη δοκιμή να είναι δεν είναι δύσκολο να φτιάξεις ένα test.css αρχείο και να τα βάλεις μέσα !!!

Παμε όμως στο πρόβλημα σου !!

Για αρχή όλα τα elements πάνε ιεραρχικά και όλα έχουν z-index : 0 default !!!

Δηλαδή :

<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Εφόσον παίξεις με absolute position και τα βάλεις το ένα πάνω στο άλλο , το 2 θα είναι πάνω στο 1 και το 3 πάνω στο 2 .

Ετσι εγώ θα έκανα το εξής με γνώμονα ότι τα animation τα κάνεις με jQuery .

Στο 1 θα έβαζα z-index : 1 , στο 2 z-index : 2 και στο 3 z-index : 3 . Με αυτόν τον τρόπο έκανα override τα default values . Αυτό θα με βοηθήσει στην συνέχεια με το animation και το πραγματικό z-index που θέλω να πετύχω .

Το animation του καθενός θα χωριστεί σε 4 μέρη (2x every event) .

1)Hover :

α) Start Animation

β) End animation

2)Hover Out :

α) Start Animation

β) End animation

Τώρα στο Hover Start Animation θα του έδινα ένα z-index : 10 + το value που του έδωσα με το css (μπορείς να δώσεις το z-index με ένα μοναδικό id για το κάθε αντικείμενο σου).

Τώρα στο Hover Out End Animation θα επέστρεφα το αντικείμενο στο αρχικό του z-index δηλαδή θα αφαιρούσα το +10 που του είχα δώσει .

Ετσι όλη την διάρκεια του animation θα κρατούσα την ιεραρχία που θα ήθελα και το ένα θα είναι πάνω στο άλλο ακριβώς όπως το θέλω !!

Δεν το έχω δοκιμάσει αλλά λογικά πρέπει να λειτουργήσει !!

Αυτη δεν είναι η μοναδική λύση ούτε απαραίτητα η σωστή αλλά είναι μια αρχή για να κάνεις αυτό που θέλεις !!!

Ελπίζω να βοήθησα και σε περίπτωση που βρεις κάτι καλύτερο θα χαρώ να ακούσω την λύση !!!

Σύνδεση

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

Προτεινόμενες αναρτήσεις

anvasila

sougiasdj

anvasila

SpirosLouis

spartakoscs

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση