前端调试--外层div导致的部分页面无法显示

概述

最近因为做毕业设计的原因不擅长前端开发的我也在硬着头皮写着html，css，js。之后会发一些与前端相关的文章。因为毕设是两个人一起完成，就设计到合作开发的问题，本次问题是我们在对前端代码进行重构后发生的，导致前端页面一直无法显示。

重现

正常前端界面：

重构后界面：

出现问题后仔细思考重构后都做了什么，但是只能通过比对两个文件的方式去看，速度很慢，并且误以为是百度api调用的问题，所以一直在查找js逻辑是否错误。
知道在F12调试端讲map类输出后才发现height信息为0有问题，开始聚焦css的问题

在网上查了一段时间发现了一个与我遇到的问题很相像的问题
百度贴吧链接

帖子里面解决问题的方法是将地图所在标签的css设置为

position:absolute;

在我测试后发现问题确实解决了
可是虽然解决了，我的疑问更多了

1.这句css什么意思
2.之前我也没有加过这句css显示的都好好的为什么

问题1
根据W3school中关于position的讲解position讲解
我了解到上面那句css的意思是让标签可以在页面任何中任何位置而不是相对父元素。
一想到这里我突然理解，另一位同学也谈到他新加入了一个div标签在最外层

就是图中的div但是没有加任何属性，那么也就导致了height属性为0，怪不得下面的元素无论如何都无法显示了，所以给新加的div添加高度属性就好了。

总结

仔细检讨这次问题出现的原因，是因为版本控制不好，没有良好的回退机制，无法快速定位代码的修改导致的。我们立刻将项目上传至github，并使用git作为版本控制工具合作开发。