How do I index unhidden element on top, instead of whatever is next in the DOM?

Question

I am trying to code a card drawing emulation and I have run into a problem. After I've flipped a random card I cannot get that exact card to stay on top - instead whatever is furthest down in the DOM stays on top, and the other cards just falls below it.

I have tried with Z-index (which did nothing), and I believe this might be the answer, but I think I'm overseeing something. Also tried to hide the element with a timer, which still causes overlapping issues.

Anyone who could point me in the direction of how to make the pulled card stay on top regardless of it's placement within the DOM? I've even tried to give DOM element further up higher z-index which does nothing to the order. So I have a hard time finding the problem!

JSFiddle

Full code:

// Functions for displaying the random content when card is clicked

var backgroundImage = document.getElementById("bg");

function first_function(){
console.log("test1");
document.getElementById("a").classList.remove("hide");
  document.getElementById("a2").classList.remove("hide");
document.getElementById("a").style.color = "white";
}

function second_function(){
console.log("test2");
document.getElementById("b").classList.remove("hide");
  document.getElementById("b2").classList.remove("hide");
document.getElementById("b").style.color = "white";
}

function third_function(){
console.log("test3");
document.getElementById("c").classList.remove("hide");
document.getElementById("c2").classList.remove("hide");
document.getElementById("c").style.color = "white";
}

function last_card(){
console.log("last one");
document.getElementById("last").classList.remove("hide");
document.getElementById("last2").classList.remove("hide");
document.getElementById("last").style.color = "white";
}

// Splice array 1 item at a time

Array.prototype.randsplice = function () {
var randomnbr = Math.floor(Math.random() * this.length);
// Removed extra variable
return this.splice(randomnbr, 1);
};

// Use an eventlistener to wait for the DOM to load so that we can depend on DOM elements being available

window.addEventListener("load",function(){

// Setup the array we will use for this example
var my_array = [
    first_function,
    second_function,
    third_function,
];

// Attach a click event handler to our button

backgroundImage.onclick = function(){

// Hide content after each click

var list = document.getElementsByClassName("hide-all");
for(var i=0;i 0){   
var new_numb = my_array.randsplice();
new_numb[0].apply(null);

// Animation making card unclickable until animation is complete 

backgroundImage.classList.add("animstart");
backgroundImage.addEventListener( "animationend",  function() {
backgroundImage.classList.remove("animstart"); 
} );

// Check if the array is empty and if so, perhaps display a message

}else{
last_card();
backgroundImage.classList.add("no-click");
}
}
});

body, html{
height: 100%;
margin: 0;
background-color: #333;
}
/* Background card */

.bgcard{
width:9.4vw;
display: inline-block;
position:absolute;
left:35.4%;
top:66.2%;
cursor: pointer;
}

/* Animation making card unclickable start */

.animstart{
animation-name: examples;
animation-duration: 1s;
}

@keyframes examples {
    0%   { pointer-events: none;}
    100% { pointer-events: none;}
}

.cards{
z-index: 100;
transform: rotateY(180deg);
width: 14vw;
font-size: 1.2vw;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
animation-name: flip;
animation-duration: 0.6s;
animation-fill-mode: forwards;
animation-delay: 0s;
}

@keyframes flip {
from { transform: rotateY(180deg); left: -10vw; }
to { transform: rotateY(0deg); left: 0vw; }
}

 @keyframes flips {
from { transform: rotateY(0deg); left: -10vw; }
to { transform: rotateY(180deg); left: 0vw; }
}

.frontcard {
width: 14vw;
z-index: 200;
transform: rotateY(0deg);
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
animation-name: flips;
animation-duration: 0.6s;
animation-fill-mode: forwards;
animation-delay: 0s;
}

.frontcard, .back {
backface-visibility: hidden;
position: absolute;
}

.text-wrap{
padding-left: 200px;
width: 50vw;
position: absolute;
}

p{
top: 10%;

animation-name: hidden;
animation-duration: 0.6s;
}

h2{
top: 5%;
animation-name: hidden;
animation-duration: 0.6s;
}

.pulled-card-container{
position: absolute;
right: 24%;
top:66.2%;;
display: inline-block;
z-index: 100;
perspective: 1000;
}

.pulled-card-container-done{
position: absolute;
right: 24%;
top:66.2%;;
display: inline-block;
}

@keyframes example {
    0%   { left:-10vw;}
    25%  { left:0px;}
    50%  { left:0px;}
    75%  { left:0px;}
    100% { left:0px;}
}

  @keyframes hidden {
    0% {opacity: 0;}
    25%  {opacity: 0;}
    50%  {opacity: 0;}
    75%  {opacity: 0;}
    100% {opacity: 1;}
}

.no-click{
pointer-events: none;
cursor: none;
}

.hide{
display: none; 
}

.hideanim{
  opacity: 1;
  -webkit-animation-delay: 1s;
  -webkit-animation-name: fadein;
  -webkit-animation-duration: 1s; 
  -webkit-animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-delay: 1s;
  animation-name: fadein; 
  animation-duration: 1s;
  animation-timing-function: linear;
}

@-webkit-keyframes fadein {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  @keyframes fadein {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }






    
    X of Cards
    First Displayed Text
    
    
        
        
     



    
    Y of Cards
    Second displayed text
    
    
        
        
    



    
Z of Cards
    Third displayed text
    
    
        
        
    



    
Last of Cards
    The last card in the deck

Any help is greatly appreciated!

user_4106035 · Answer

When using z-index, you will need to set the position to relative or absolute ... pretty sure, like 90% sure.

user_13756827 · Answer

After fidgeting around some more I found my grave error. Here's the answer, in case anyone ever wonders:

I had z-index on pulled-card-container that conflicted. After removing that, and doing a

var zNumb = 300;
zNumb++;
document.getElementById("imgOne").style.zIndex = zNumb;

on each function it worked like a charm!

How do I index unhidden element on top, instead of whatever is next in the DOM?

2 Answers