CSS/JS开发纸牌游戏 如何让移动的卡片始终置于最顶层

问题现象 #

使用HTML/CSS/JavaScript开发纸牌游戏时，已实现「点击第一张卡片再点击第二张卡片，第一张卡片移动到第二张卡片位置、y轴偏移20px」的交互，但移动方块K到方块Q位置时，方块K会显示在方块Q下方，需要实现被移动卡片始终置于视觉最顶层的效果。

附原有实现代码：

原有JS代码 #

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);
};

function Pr(str) {
  console.log(str)
};

原有CSS代码 #

.card {
  height: 100px;
  position: fixed;
}

原有HTML代码 #

<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>

问题原因 #

设置了position: fixed/absolute/relative的定位元素，堆叠顺序由z-index属性控制：DOM结构中后渲染的元素默认层级更高，原有代码移动卡片时没有修改被移动卡片的z-index，因此DOM中靠前的方块K移动后，层级依然低于后渲染的方块Q，就会显示在下方。

修复方法 #

维护一个全局层级计数器，每次移动卡片时将计数器自增，赋值给被移动卡片的z-index属性，保证被移动卡片的层级永远高于其他所有卡片，即可实现置顶效果。同时补充移动完成后清空选中卡片的逻辑，修复原有交互的逻辑漏洞。

修改后JS代码 #

var x1 = '';
var x2 = '';
var y1 = '';
var y2 = '';
var img1 = '';
// 全局层级计数器，初始值设为较高值避免和页面其他元素冲突
let maxZIndex = 100;

function move(id) {
  var currentCard = document.getElementById(id);
  Pr('0');
  if (img1 == '') {
    Pr('1');
    img1 = currentCard;
    Pr(img1);
    var box1 = currentCard.getBoundingClientRect();
    x1 = box1.left + box1.width * 0.5;
    y1 = box1.top + box1.height * 0.5;
  } else if (img1 != '') {
    Pr('2');
    img2 = currentCard;
    Pr(img2);
    var box2 = currentCard.getBoundingClientRect();
    x2 = box2.left;
    y2 = box2.top + 20;
    // 提升被移动卡片的层级到最高
    maxZIndex++;
    img1.style.cssText = `left:${x2}px;top:${y2}px;z-index:${maxZIndex};`;
    // 移动完成后清空选中的第一张卡片，支持下一次选卡移动
    img1 = '';
  };

  Pr('x1 = ' + x1 + ' | y1 = ' + y1 + ' | x2 = ' + x2 + ' | y2 = ' + y2);
};

function Pr(str) {
  console.log(str)
};

CSS和HTML代码无需修改，原有.card类已经设置了position: fixed，z-index属性可以正常生效。

内容的提问来源于stack exchange，提问作者Sachro