【前端实习】实现WEB静态页面+positon问题

项目场景：

提示：这里简述项目相关背景：

游戏WEB端页面活动更新，根据UI提供的PSD，使用PS切图并利用CSS实现静态页面的效果，同时利用JS实现按钮切换逻辑，并git上传至服务器发布。

1.确保html和js的id字符串一致，由于canvas画布皆由js操作，所以html画布的id必须与js的id一致。

2.切图：将上面的部分设置为公共部分，然后二态和按钮进行切换。

3.安装sftp，上传至服务器，upload之后会有缓存，需要ctrl+f5强制刷新！或者后面加 ?v=1/2/3

4.实现弹窗逻辑，回调函数实现。
背景图：点击之后直接右键检查！！样式会更新，按照bgc-position进行修改，实现不同的act1/2/3/4/5进行修改。

5.tinypng.com将UI给的设计图，进行压缩，一次最多压缩20张，重新刷新该网址，即可重新压缩。

6.git提交。

---

问题描述

提示：这里描述项目中遇到的问题：

为什么底部footer会浮动在中间，是哪些问题导致的？
问题详情：

1.未点击按钮时：
wrapper是relative
  animation是relative
  active_content           未显示
     content是relative     未显示
  footer是relative
2.点击按钮时：
wrapper是relative
  animation是relative      jquery点击按钮未隐藏
  active_content           absolute脱标，不占位了
      content是relative
  footer是relative         由于active_content是绝对定位脱标了，跟在未隐藏的animation之后，所以压在content上了

未点击按钮时，footer直接跟在animation后。
由于点击按钮出现active_content时，未隐藏animation，且active_content是absolute绝对定位，发生脱标，不占位了。此时footer依然跟在被active_content（其z-index大于animation）盖住的animation后。

---

原因分析：

提示：这里填写问题的分析：

由于position定位导致的问题。
style="position: absolute，子绝父相，如果父元素为默认static（static即元素会遵循正常的文档流，且会忽略 top,bottom,left,right 等属性），则相对于window定位top，left进行定位；
absolute 元素将会脱离正常的文档流，如同display：none一样的效果；
注意，absolute定位的元素会被"正常页面流"忽略，即在"正常页面流"中，该元素所占空间为零，周边元素不受影响。

---

解决方案：

提示：这里填写该问题的具体解决方案：

animation这一层，利用js来hide，然后将active_content的positon的absolute注释掉。