如何用CSS实现点击生成的扑克牌横向并排且内部元素位置正确

问题1：卡牌角标跑到容器外的解决方案 #

绝对定位元素的定位参考是距离它最近的、position属性不为static的父元素。你之前只给.card-container加了position: relative，而角标元素的直接父级是.card（默认position: static），所以角标会基于外层容器定位，才会跑到卡牌外。
修复方式：给.card添加position: relative，不需要给.card-container加该属性。

问题2：卡牌无法横向并排的解决方案 #

你已经给外层容器#gugu设置了grid布局，原配置grid-template-columns: auto auto auto auto是固定4列，适配性不好，可以改成grid-template-columns: repeat(auto-fit, minmax(270px, 1fr))，自动根据容器宽度调整每行可放的卡牌数量，最小宽度预留了卡牌+阴影的空间不会挤压元素。
另外你创建DOM的时候可以直接用刚生成的元素变量做挂载，不用每次查询DOM，避免你提到的索引错误问题，下面的JS示例已经做了对应优化。

修改后的完整代码

CSS

.card-container {
  margin: 5px; /* 可选，加边距避免卡牌阴影被截断 */
}

.card {
  position: relative; /* 新增这行，作为角标的定位参考 */
  width: 250px;
  height: 350px;
  border: 3.5px solid gray;
  border-radius: 12.5px;
  box-shadow: 10px 10px grey;
  background-color: white;
}

.value-container {
  position: absolute;
}

.value-number {
  font-family: 'Abel', sans-serif;
  font-size: 30px;
}

.value-suit {
  font-size: 30px;
}

.container-bottom {
  bottom: 8px;
  right: 16px;
  transform: rotate(180deg);
}

.container-top {
  top: 20px;
  left: 20px;
}

.grid-container {
  display: grid;
  /* 替换原来的4列配置，自动适配列数 */
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

JavaScript

var cardcon = document.createElement('div');
cardcon.className = "card-container";
document.getElementById('gugu').appendChild(cardcon);

// 直接用刚创建的元素挂载，不需要查询DOM
var card = document.createElement('div');
card.className = "card";
cardcon.appendChild(card);

var valuecon = document.createElement('div');
valuecon.className = "value-container container-top";
card.appendChild(valuecon);

var valuenumber = document.createElement('div');
valuenumber.className = "value-number";
valuenumber.textContent = "7";
valuecon.appendChild(valuenumber);

var valuesuit = document.createElement("div");
valuesuit.className = "value-suit";
valuesuit.innerHTML = "&#9829";
valuenumber.appendChild(valuesuit);

var valuedon = document.createElement("div");
valuedon.className = "value-container container-bottom";
card.appendChild(valuedon);

var valuenumber1 = document.createElement('div');
valuenumber1.className = "value-number";
valuenumber1.textContent = "7";
valuedon.appendChild(valuenumber1);

var valuesuit1 = document.createElement("div");
valuesuit1.className = "value-suit";
valuesuit1.innerHTML = "&#9829";
valuenumber1.appendChild(valuesuit1);

HTML 无需修改

<div id="gugu" class="grid-container"></div>

可选布局方案（适合21点手牌场景） #

如果你的游戏需要手牌固定横向排列、超出宽度滑动，可以把.grid-container的样式换成flex布局：

.grid-container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
  /* 滚动条美化可选 */
  scrollbar-width: thin;
  scrollbar-color: white #2196F3;
}

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