游戏界面元素错位、交互偏移及布局碰撞问题求助

问题梳理 #

• 点击More/Less按钮时，.question-text2、valueIndex、valueIndex2及按钮出现上下偏移（仅价格显示时触发）
• 初始状态下物品名称和valueIndex未居中
• 价格默认未隐藏
• 需在不重构现有代码结构的前提下解决元素碰撞与布局问题

修改后的代码 #

HTML 代码 #

<h2 id="question-text" class="question-text"> 
  <span class="items" data-item-name="${item2.name}">${item2.name}</span> 
</h2> 
<h2 id="question-text2" class="question-text2"> 
  <span class="itemsz" data-item-name="${item1.name}">${item1.name}</span> 
</h2> 
<h3 id="valueIndex" class="hidden"> 
  <span class="value">${item2.value}</span>  
</h3> 
<h3 id="valueIndex2" class="hidden"> 
  <span class="value">${item1.value}</span>  
</h3> 
<div class="buttons"> 
  <button id="more">More</button> 
  <button id="less">Less</button> 
</div>

CSS 代码 #

/* 新增容器统一控制左右布局，避免定位冲突 */
.game-container {
  display: flex;
  width: 100vw;
  height: 70vh;
}

.question-text {
  position: relative;
  z-index: 104;
  font-size: 3rem;
  width: 50vw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}

.question-text2 {
  position: relative; /* 从absolute改为relative，纳入flex布局流 */
  z-index: 104;
  font-size: 3rem;
  width: 50vw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}

.buttons {
  width: auto;
  position: absolute;
  bottom: 10%; /* 固定在底部，避免随其他元素偏移 */
  left: 50%;
  transform: translateX(-50%); /* 水平居中 */
  z-index: 103;
  display: flex;
  gap: 2rem;
}

#valueIndex {
  position: absolute;
  z-index: 104;
  font-size: 3rem;
  width: 50vw;
  top: 50%;
  left: 0;
  transform: translateY(-50%); /* 垂直居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}

#valueIndex2 {
  position: absolute;
  z-index: 104;
  font-size: 3rem;
  width: 50vw;
  top: 50%;
  right: 0;
  transform: translateY(-50%); /* 垂直居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}

/* 价格默认隐藏类，后续可通过JS移除该类显示价格 */
.hidden {
  display: none;
}

核心修复点 #

• 新增game-container flex容器，将左右两个物品名称区域纳入统一布局，消除绝对定位导致的偏移冲突
• 调整.question-text2的定位属性，从absolute改为relative，实现自然居中
• 重构按钮容器的定位逻辑，固定在底部并水平居中，移除重复的top/left属性避免布局混乱
• 修改价格元素的垂直居中方式，使用top:50%+transform: translateY(-50%)替代固定高度，解决显示时的偏移问题
• 添加.hidden类实现价格默认隐藏，不破坏原有代码结构

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