treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] CSS3 transform and z-indexes

  • Help me tame this bug in Safari please, in Chrome (uses Webkit like Safari) the page works fine. The front of the box needs to stay on top of the albums but when you click an album then play makes it fly out, that should be on top of the front.

    Still haven't figured out a solution, is what i want to do impossible? (Currently getting it to work in just webkit browsers)

    Here's how it operates, you can flip (or click top/bottom) to go through the albums. Click an album, then click it's center to make it fly out, This albums should be on top of the .box-front

    New version http://jsfiddle.net/ideaprison/Tptxf/

    Using the transform on the .box-front makes the .new albums when flipping pass through it. http://jsfiddle.net/ideaprison/Tptxf/1/

    Just with position:; http://jsfiddle.net/ideaprison/NgmEJ/

    Hope I made myself clear, else have a look using [Chrome] at saltyknuckles.net/archives/ to see how it should function.

    Thanks all!

  • Hi there,

    I see your problem...As I am still fuzzy on how the whole thing works, all I can do is remind you that position: absolute will tell the rest of the page to act as if that element is not there. I think Chrome must be smart enough to remember that even though the rest of the page is ignoring it, it will still apply z-index. However, Safari is complying to CSS...this is just normal. I suggest maybe using position: relative to achieve the same positioning.

    Sorry if I'm not being any help--don't understand the project very well, but it sure looks kickin'!

    Red

  • Thats okay, i will add that the more i kept trying to get it to work the messier it probably got. if you check out http://www.saltyknuckles.net/archives/ in Chrome then you can see how it should work

  • Still haven't figured out a solution, is what i want to do impossible? (Currently getting it to work in just webkit browsers)

    Here's how it operates, you can flip (or click top/bottom) to go through the albums. Click an album, then click it's center to make it fly out, This albums should be on top of the .box-front

    New version http://jsfiddle.net/ideaprison/Tptxf/

    Using the transform on the .box-front makes the .new albums when flipping pass through it. http://jsfiddle.net/ideaprison/Tptxf/1/

    Just with position:; http://jsfiddle.net/ideaprison/NgmEJ/