响应式网站动画背景位置异常问题（限定Flex布局）

嘿，我看你在学校作业的响应式网站里遇到了动画背景没在预期位置的问题，结合你提供的代码，我帮你梳理了问题点和修复方案：

问题分析 #

从你的代码里能看到几个关键问题：

• CSS选择器写错了：div.wrap content应该是.wrap-content，这个笔误会导致你写的Flex布局规则完全不生效，影响页面结构
• 背景的定位方式不对：你用了position: fixed让背景固定在视口，但看起来你希望它是.site1容器的背景，而不是整个页面
• .site1没有设置position: relative，就算把背景改成绝对定位，也找不到正确的参考父级

修复后的代码 #

CSS部分 #

/* 修复动画背景的定位，让它属于.site1容器 */
.bg {
  animation: slide 3s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
  left: -50%;
  bottom: 0;
  top: 0;
  opacity: .5;
  position: absolute; /* 从fixed改成absolute */
  right: -50%;
  z-index: -1;
}
.bg2 {
  animation-direction: alternate-reverse;
  animation-duration: 4s;
}
.bg3 {
  animation-duration: 5s;
}
@keyframes slide {
  0% { transform: translateX(-25%); }
  100% { transform: translateX(25%); }
}

.site1 {
  background: #4B9ACC;
  width: 100%;
  height: 100em;
  position: relative; /* 添加相对定位，作为.bg的参考父级 */
}

/* 修复选择器错误，确保Flex布局生效 */
div.wrap-content {
  display: flex;
  flex-flow: column;
}

@media screen and (min-width: 600px) {
  div.wrap-content {
    flex-flow: row;
  }
  nav, aside {
    flex: 0 0 10rem;
  }
  body {
    display: flex;
    flex-flow: column;
    background-color: black;
  }
  div.wrap-content {
    flex: 1 auto;
  }
}

main {
  display: block;
}

HTML部分（结构本身无问题，配合CSS修改即可） #

<div class="wrap-content">
  <main>
    <div class="site1" id="3">
      <div class="bg"></div>
      <div class="bg bg2"></div>
      <div class="bg bg3"></div>
      <h1 class="title">Welcome to my Website!</h1>
    </div>
  </main>
</div>

关键修改说明 #

• 把.bg的position: fixed改成absolute，同时给.site1加上position: relative，这样动画背景就会被限制在.site1容器内部，符合你预期的位置
• 修正了div.wrap content这个错误选择器，改成.wrap-content，确保你写的Flex布局规则能正确应用到容器上，避免页面结构混乱
• 完全保留了你原本的动画效果和Flex布局逻辑，符合作业要求的仅使用Flex布局的规定

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