CSS模态弹窗footer定位偏移、非弹窗状态不显示问题咨询

问题由HTML结构错误+CSS书写不规范共同导致：

• 核心原因是HTML标签闭合缺失：模态框外层.modal的<div>没有写对应的闭合标签</div>，浏览器解析DOM树时，会自动把后续的<footer>、脚本标签全部归为.modal的子元素。而.modal本身设置了position: fixed且宽高占满整个视口，footer作为它的子元素，自然会受模态框的定位规则影响，无法作为独立的页面底部元素渲染。
• 其次是CSS存在无效属性和逻辑缺失：
  • .modal样式里写的display: flex-box是无效属性值，CSS不存在这个取值，该声明会被浏览器直接忽略；
  • 没有给模态框写默认隐藏的样式，导致模态框始终覆盖在页面上，被嵌套在内部的footer自然无法在常规页面流里正常显示；
  • 给footer加position: absolute时没有指定定位基准和偏移值，会相对于最近的非static定位父元素（也就是fixed定位的.modal）做定位，默认的偏移规则就会导致footer偏移到页面左侧。

按以下步骤调整即可：

1. 补全HTML标签闭合：在.modal-content的闭合标签后面，补上.modal对应的</div>，把footer放到和模态框平级的位置，作为body的直接子元素，不要嵌套在模态框内部。
2. 修正CSS错误：
   • 删掉.modal里无效的display: flex-box声明，需要居中模态框的话直接用display: flex配合对齐属性即可；
   • 给.modal加默认隐藏样式display: none，控制弹窗触发时再切换为显示状态；
   • 要让footer固定在页面最底部，不要用position: absolute，给body设置最小高度为视口高度，用flex布局把footer推到页面底部即可，不会受其他元素定位影响。

修正后的HTML结构 #

<!-- 模态框部分，补全闭合标签 -->
<div id="myModal" class="modal">
  <div class="modal-content">
    <p>Game Over!</p>
    <button id="newGame"> Restart Game </button>
  </div>
</div> <!-- 补上之前漏掉的模态框闭合标签 -->

<footer>
  COPYRIGHT &copy;
  <script>
    new Date().getFullYear() > 2010 && document.write(+new Date().getFullYear());
  </script>
  <!-- github icon -->
  <a href="https://github.com/" target="_blank">
    <i class="fab fa-github"></i>
  </a>
</footer>

<script src="main.js"></script>
</body>
</html>

修正后的核心CSS #

/* 给html、body设置基础高度，支撑footer贴底 */
html, body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/*Modal 修正无效属性，加默认隐藏*/
.modal {
  display: none; /* 默认隐藏弹窗，触发时再通过JS切换为flex */
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 999; /* 提高弹窗层级，避免被其他元素遮挡 */
  background: rgba(0,0,0,0.5); /* 可选：加半透明遮罩优化弹窗体验 */
  justify-content: center;
}

/* Modal Content 合并重复的样式声明 */
.modal-content {
  display: flex;
  flex-direction: column;
  background-color: #869592;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 60%;
  border-radius: 7px;
}

/* FOOTER 去掉absolute定位，自动贴在页面底部 */
footer {
  margin-top: auto; /* 配合body的flex布局，自动把footer推到页面最底部 */
  font-family: input-mono, monospace;
  font-weight: 400;
  font-size: 15px;
  color: #869592;
  text-align: center;
  padding: 1rem 0;
}

补充：按上述写法调整后，footer作为body的直接子元素，无论弹窗是否显示，都会固定在页面最底部，不会再受模态框定位规则影响。

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