为何给<div>内的<span>添加.wrappers类后文本在OBS中消失？

我正尝试通过CSS将变量显示在HTML页面上，用于OBS流媒体软件的图形展示。但每次给id为p1Name和p2Name的<span>添加.wrappers类后，OBS中的HTML输出文本就会消失。未添加该类时文本显示正常，请问是什么原因导致的？

我已尝试修改页面全局设置、类属性以及移动元素，但文本仍消失。
补充说明：修改.wrappers类的opacity属性不影响元素可见性。

JavaScript #

//Time stuff
let time = document.getElementById("current-time");

setInterval(() => {
  let d = new Date();
  time.innerHTML = d.toLocaleTimeString(navigator.language, {
    hourCycle: 'h23',
    hour: '2-digit',
    minute: '2-digit'
  });
}, 1000);

CSS #

@font-face {
  font-family: "Futura";
  src: url('Resources/Fonts/Brandon_bld.otf');
}

* {
  margin: 0;
  padding: 0;
  font-family: "Futura";
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
}

.graphicBox {
  position: absolute;
  width: 1800px;
  height: 105px;
  background: rgb(51, 116, 182);
  background: linear-gradient(90deg, rgba(51, 116, 182, 0.75) 0%, rgba(110, 83, 180, 0.75) 70%);
  border-radius: 15px;
  bottom: 40px;
  left: 50px;
  filter: drop-shadow(-2px 2px 4px black);
}

.statusBox {
  position: absolute;
  font-family: "Futura";
  font-weight: bold;
  padding-top: 8px;
  font-size: 40px;
  width: 130px;
  height: 70px;
  background: rgb(231, 231, 231);
  border-radius: 15px;
  text-align: center;
  bottom: 125px;
  left: 100px;
  filter: drop-shadow(-2px 2px 4px black);
}

.timeDisplay {
  width: 140px;
  height: 30px;
  display: flex;
  align-items: left;
  justify-content: center;
  position: absolute;
  font-size: 14px;
  color: white;
  bottom: 58px;
  left: 771px;
}

.timeZone {
  width: 60px;
  height: 20px;
  display: flex;
  align-items: left;
  justify-content: space-between;
  position: absolute;
  font-size: 15px;
  color: white;
  bottom: 40px;
  left: 812px;
}

.scoreboardP1 {
  position: absolute;
  left: 150px;
  bottom: 60px;
  width: 300px;
}

.scoreboardP2 {
  position: absolute;
  left: 450px;
  bottom: 60px;
  width: 300px;
}

.wrappers {
  position: absolute;
  width: 340px;
  height: 100px;
  line-height: 54px;
  top: 356px;
  opacity: 0;
  color: black;
}

#p1Wrapper {
  bottom: 540x;
  left: 300px;
  color: white;
}

#p2Wrapper {
  width: 300px;
  bottom: 20px;
  left: 100px;
  color: white;
}

.scoreDisplay {
  position: absolute;
  color: white;
  width: 60px;
  height: 60px;
  align: center;
  font-family: "Avant";
}

#p1Format {
  top: 30px;
  left: 1160px;
}

#p2Format {
  top: 30px;
  left: 1450px;
}

.scoreBox {
  position: absolute;
  width: 45px;
  height: 45px;
  background: white;
  border-radius: 10px;
  align: center;
}

#p1Box {
  top: 28px;
  left: 1150px;
}

#p2Box {
  top: 28px;
  left: 1440px;
}

HTML #

<div class="graphicBox">
</div>

<div class="statusBox">
  <p>NEXT</p>
</div>


<div class="timeDisplay">
  <h1 id="current-time"></h1>
</div>



<div class="timeZone">
  <p>EST</p>
</div>


<div id="overlayP1" class="scoreboardP1">
  <span id="p1Wrapper" class="wrappers">
            <span id="p1Name" class="names"></span>
  </span>
</div>

<div class="scoreboardP2">
  <span id="p2Wrapper">
            <span id="p2Name" class="names"></span>
  </span>
</div>

核心问题1：绝对定位导致元素偏移出捕获区域 #

.wrappers类设置了position: absolute和top: 356px，而父容器.scoreboardP1/.scoreboardP2本身也是绝对定位，但没有设置position: relative，这会让.wrappers相对于整个页面定位，直接跑到了top:356px的位置，超出了OBS捕获的区域，所以看起来文本消失了。

另外#p1Wrapper里的bottom: 540x是笔误（少了px单位），导致这个属性无效，元素只能沿用.wrappers的top设置，位置完全偏离预期。

核心问题2：默认透明设置 #

.wrappers类默认opacity: 0，虽然你说修改opacity没用，但这个设置本身会让元素完全透明，需要确保它被覆盖为opacity: 1。

修复步骤 #

1. 修正笔误：把#p1Wrapper的bottom: 540x改成bottom: 540px（或根据实际布局调整数值）
2. 调整定位关系：给父容器.scoreboardP1和.scoreboardP2添加position: relative，这样.wrappers的绝对定位会相对于父容器，而不是整个页面
3. 移除不合理的全局定位：去掉.wrappers的top:356px，或者根据父容器的位置重新设置top/bottom值
4. 确保元素可见：把.wrappers的opacity设为1，同时确认文字颜色和背景有足够对比度

修改后的CSS示例 #

.scoreboardP1 {
  position: absolute;
  left: 150px;
  bottom: 60px;
  width: 300px;
  position: relative; /* 添加相对定位，让子元素基于此定位 */
}

.scoreboardP2 {
  position: absolute;
  left: 450px;
  bottom: 60px;
  width: 300px;
  position: relative; /* 添加相对定位 */
}

.wrappers {
  position: absolute;
  width: 340px;
  height: 100px;
  line-height: 54px;
  /* 移除top:356px，改为相对于父容器的位置 */
  bottom: 0;
  left: 0;
  opacity: 1; /* 确保元素不透明 */
  color: white;
}

#p1Wrapper {
  bottom: 0; /* 基于父容器调整位置 */
  left: 0;
  color: white;
}

#p2Wrapper {
  width: 300px;
  bottom: 0;
  left: 0;
  color: white;
}

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