Estoy haciendo un juego de solitario en HTML/CSS/JavaScript y lo tengo de modo que cuando haces clic en una carta y luego en otra, mueve la primera carta a la misma posición que la segunda con el valor y shifter 20px. El problema es que cuando muevo la primera carta (rey) a la segunda carta (reina), el rey está debajo de la reina. Me gustaría hacer que cada vez que muevas una carta, esa carta se coloque encima.
Aquí está el código relevante:
var x1 = ''; var x2 = ''; var y1 = ''; var y2 = ''; var img1 = ''; function move(id) { var id = document.getElementById(id); Pr('0'); if (img1 == '') { Pr('1'); img1 = id; Pr(img1); var box1 = id.getBoundingClientRect(); x1 = box1.left + box1.width * 0.5; y1 = box1.top + box1.height * 0.5; } else if (img1 != '') { Pr('2'); img2 = id; Pr(img2); var box2 = id.getBoundingClientRect(); x2 = box2.left; y2 = box2.top + 20; img1.style.cssText = 'left:' + x2 + 'px;top:' + y2 + 'px;'; }; Pr('x1 = ' + x1 + ' | y1 = ' + y1 + ' | x2 = ' + x2 + ' | y2 = ' + y2); }; //Making 'console.print(...)' quicker to type function Pr(str) { console.log(str) }; .card { height: 100px; position: fixed; } <div style='position:relative;'> <img class='card' style='left:150px;' id='KD' onclick='move("KD")' src='Cards/Diamonds/K.png'> <img class='card' id='QD' src="Cards/Diamonds/Q.png" onclick='move("QD")' style=''> </div>¡Me lo imaginé!
var t = 0; var img1 = ''; var img2 = ''; function move(id){ if (t==0){ img1 = document.getElementById(id); id1 = id; t=1; }else if (t==1){ t=0; id2 = id; img2 = document.getElementById(id); var rect = img1.getBoundingClientRect(); var rect2 = img2.getBoundingClientRect(); var x1 = rect.left + rect.width * 0.5; var y1 = rect.top + rect.height * 0.5; var x2 = rect2.left; var y2 = rect2.top + 20; img1.style.cssText = 'z-index:2;left:'+x2+'px;top:'+y2+'px;'; }; };Aplique un z-index a la imagen ( z-index: 1 debería ser suficiente), y cada imagen agregada adicionalmente debe obtener un valor más alto que el anterior (usando alguna lógica "+1" para el valor en el script).