调整浏览器大小时内容重叠

content overlapping when resizing browser

我是编码的新手,完全不知道如何解决这个问题,非常感谢您的帮助。

我正在创建一个虚拟简历;有一些内容在调整浏览器大小时不断重叠,我尝试的任何方法都无法阻止它...

我希望内容随着浏览器大小的调整而调整;如果可能的话。但是我不希望内容重叠..

我目前的工作托管在 codepen 上;这是 link...

这是我的作品 http://codepen.io/JRMatthews/pen/RKWjLa

<div class='title'> <p>Jordan Matthews</p> </div>

该标题似乎与它下面的文字重叠;但我希望它保持在上方而不重叠;就像浏览器全尺寸时一样...

请帮忙

*****编辑****

我也非常希望找到最简单的方法来居中对齐我的所有内容 - 因为我似乎不知道该怎么做。

但最大的问题是重叠。

如果需要,我可以添加屏幕截图,但 link 已插入我在 CodePen 上的笔。

请帮忙。谢谢。

尝试从您的元素中删除绝对定位,有很多方法可以在不使用绝对位置的情况下将元素准确定位到您想要的位置。

您可以使用 text-alignpaddingmargin 来更改文本位置。

从您的 CSS 代码中删除所有出现的 position: absolute