These forums are currently read-only due to receiving more spam than actual discussion. Sorry.

It is currently Sat Dec 02, 2017 4:23 pm Advanced search

CSS3 ZIndex Issue

If you are stuck or have questions regarding HTML or other Web technologies, ask your questions here. No question too dumb!

CSS3 ZIndex Issue

Postby cjennison » Thu Aug 23, 2012 2:14 pm

I'm currently working on a "Tracer" type of game. The player sees a preview of a set of 16 Cards [4x4] and has to trace the path to win.

However, The CSS I am using only works in Mozilla Firefox, not in Chrome or Mobile - However I thought I was using the same prefixes for webkits and moz.

The Z-Index of the Card Backs is 100, defined in the javascript. However, when I go into Chrome, the Z-Index is Ignored and the order in which the cards were placed takes authority.

Here's the CSS
Code: Select all
.card {
   position: absolute;
   -webkit-perspective: 600px;      
}

.cardback {
   position: absolute;
   
   width: 50px;
   height: 50px;
   background: url('../images/card_top.PNG') no-repeat;
   background-size: 100% 100%;
   background-origin:content-box;
   background-position:bottom;
   -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.9);
   -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.9);
   box-shadow: 0 1px 5px rgba(0,0,0,0.9);

   /* -- transition is the magic sauce for animation -- */
   -o-transition: all .4s ease-in-out;
   -ms-transition: all .4s ease-in-out;
   -moz-transition: all .4s ease-in-out;
   -webkit-transition: all .4s ease-in-out;
      
   -moz-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
   -webkit-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
   box-shadow: 0 15px 50px rgba(0,0,0,0.2);   
}

.cardback.fade {
   opacity:0;
   z-index: 0;
}

.cardback.unfade {
   opacity:1;
}

.cardGood {
   position: absolute;
   opacity: 1;
   width: 50px;
   height: 50px;
   background: url('../images/card_bot.PNG') no-repeat;
   background-size: 100% 100%;
   background-origin:content-box;
   background-position:bottom;

}

.cardBad {
   position: absolute;
   
   width: 50px;
   height: 50px;
   background: url('../images/card_bad.PNG') no-repeat;
   background-size: 100% 100%;
   background-origin:content-box;
   background-position:bottom;
   
}


And then the javascript that appends to the stage:
(Functions are called in this order)
Code: Select all
drawCardBacks = function () {
      playArea = document.getElementsByClassName('play-area')[0];

      for (var y = 1; y <= rows; y++) {
         for (var x = 1; x <= cols; x++) {
            var container = document.createElement("div"),
               sprite;
            sprite = document.createElement("div");
            dom.addClass(sprite, "cardback");
            
            
            
            sprite.setAttribute('card-number', cardNumber);
            
            sprite.style.zIndex =100;
            sprite.style.height = "50px";
            sprite.style.width = "50px";

            sprite.style.left = ((x * spacing) + xPos) + "px";
            sprite.style.top = ((y * spacing) + yPos) + "px";

            container.appendChild(sprite);
            sprite.innerHTML = cardNumber;
            cardArray.push(sprite);

            dom.addClass(container, "card");
            playArea.appendChild(container);

            cardNumber++;
         }
      }
   }

   drawWinningCards = function () {
      winCards = game.logic.getPath();
      var winCardNumber = 0;

      for (var q = 0; q < winCards.length; q++) {
         for (var i = 0; i < cardArray.length; i++) {
            if (winCards[q] == cardArray.indexOf(cardArray[i])) {

               var container = document.createElement("div"),
                  sprite;

               sprite = document.createElement("div");
               dom.addClass(sprite, "cardGood");

               sprite.style.zIndex = 0;
               sprite.style.height = "50px";
               sprite.style.width = "50px";

               sprite.style.left = cardArray[i].style.left;
               sprite.style.top = cardArray[i].style.top;

               sprite.innerHTML = winCardNumber;
               winCardNumber++;

               container.appendChild(sprite);

               dom.addClass(container, "card");
               playArea.appendChild(container);
               
               goodCards.push(sprite);
            }


         }
      }
   }

   drawLosingCards = function () {

      wrongCards = game.logic.getWrongPath();
      for (var q = 0; q < wrongCards.length; q++) {
         for (var i = 0; i < cardArray.length; i++) {
            if (wrongCards[q] == cardArray.indexOf(cardArray[i])) {
               var container = document.createElement("div"),
                  sprite;
      
               sprite = document.createElement("div");
               dom.addClass(sprite, "cardBad");
      
               sprite.style.zIndex = 0;
               sprite.style.height = "50px";
               sprite.style.width = "50px";
      
               sprite.style.left = cardArray[i].style.left;
               sprite.style.top = cardArray[i].style.top;
      
               container.appendChild(sprite);
      
               dom.addClass(container, "card");
               playArea.appendChild(container);
               
               badCards.push(sprite);
            }
         }
      }
   }



Any reason this would happen?
I can link an example if anyone is further interested in helping.
cjennison
<h6>
 
Posts: 1
Joined: Thu Aug 23, 2012 2:08 pm

Re: CSS3 ZIndex Issue

Postby zcorpan » Mon Sep 10, 2012 8:07 am

Please give the link, it will be easier to find the issue.
zcorpan
<article>
 
Posts: 807
Joined: Tue Feb 06, 2007 8:29 pm
Location: Sweden


Return to Help & Advice

Who is online

Users browsing this forum: No registered users and 0 guests