JS打字动画致页面元素移位，绝对定位引发暗黑模式失效问题

我是一名初级开发者，正在制作个人作品集。给<p>标签添加JavaScript键盘打字动画后，页面大量元素移位。用position: absolute调整修复了部分问题，但引入的暗黑模式JavaScript库在设置了绝对定位的元素上无法正常生效，试了z-index也没用。

HTML代码 #

<section class="landing-page">
        <p>Luck, <br> web developer <span id="monSpan">html</span> </p>  <!-- 动画作用于此 -->

        <div>
            
            <img src="/img/undraw_developer_activity_re_39tg.svg" alt="">
            
        </div>
    </section>
    <section class="end-landing-page">
        <div>

            <button>En savoir plus <span class="material-symbols-outlined">
                arrow_downward
                </span> </button>  <!-- 移位的div -->
        </div>
</section>

CSS代码 #

.landing-page {
  display: flex;
  font-family: 'Poppins', sans-serif;
  font-size: 3em;
  font-weight: bold;
}

.landing-page p {
  padding-left: 10%;
  padding-right: 50%;
  font-size: 4rem;
 
}

.landing-page img {
  height: 10em;
  padding-left: 20%;
  padding-right: 9%;
}

.landing-page div {
  position: absolute;
  padding-left: 40%;
}

#monSpan {
  transition: all 0.5s;
  background-color: rgb(129, 129, 255);
}

.end-landing-page div {
 padding-top: 10%;
 padding-left: 8%;
}

.end-landing-page button {
  display: flex;
  align-items: center;
  background-color: rgb(129, 129, 255);
  border-radius: 30px;
  padding: 10px;
}

1. 修复打字动画导致的元素移位 #

打字动画会动态改变<p>标签的内容宽度，破坏flex布局稳定性。给<p>设置最小宽度，避免内容变化时挤压其他元素：

.landing-page p {
  padding-left: 10%;
  padding-right: 50%;
  font-size: 4rem;
  min-width: 500px; /* 根据实际内容调整数值 */
}

同时移除.landing-page div的position: absolute，让它回到flex布局中，避免脱离文档流导致的布局混乱：

.landing-page div {
  /* 移除 position: absolute; */
  flex: 1; /* 让图片容器占满剩余空间 */
  display: flex;
  justify-content: center; /* 水平居中图片 */
  align-items: center; /* 垂直居中图片 */
}

2. 修复暗黑模式库在绝对定位元素上的生效问题 #

如果必须保留绝对定位，确保元素能继承父级暗黑模式样式：

• 确认暗黑模式库通过类名（如.dark-mode）全局生效，给绝对定位元素添加对应类名，或者确保父级已应用暗黑模式类。
• 避免用!important覆盖库的样式，确保库的样式优先级足够：

/* 示例：确保暗黑模式下元素背景色生效 */
.dark-mode .landing-page div {
  background-color: inherit; /* 继承父级暗黑模式背景 */
}

另外，z-index仅对定位元素生效，若元素仍不显示，检查父级是否有overflow: hidden或其他定位限制，确保z-index的上下文正确。

3. 优化打字动画实现 #

只更新<span id="monSpan">的内容，减少对整个<p>布局的影响：

const span = document.getElementById('monSpan');
const texts = ['html', 'css', 'javascript'];
let index = 0;
let charIndex = 0;

function type() {
  if (charIndex < texts[index].length) {
    span.textContent += texts[index].charAt(charIndex);
    charIndex++;
    setTimeout(type, 150);
  } else {
    setTimeout(erase, 1000);
  }
}

function erase() {
  if (charIndex > 0) {
    span.textContent = texts[index].substring(0, charIndex - 1);
    charIndex--;
    setTimeout(erase, 100);
  } else {
    index = (index + 1) % texts.length;
    setTimeout(type, 500);
  }
}

type();

内容的提问来源于stack exchange，提问作者Loïck Sauvage