Html 为什么我的网页上的文字在缩小时没有保持在原来的位置？

这里是网络开发者noob！在Chrome中，当我缩小这个时，文本会被压缩到角落里。不过，当我使用Safari时，它不会发生。我假设这是一个CSS问题和/或我在HTML中输入它的方式。我已经把它放在JSFIDLE上了

.second{
字体系列：helvetica neue，arial，无衬线；
字体大小：30px；
字体重量：较轻；
线高：5px；
位置：相对位置；
顶部：5px；
宽度：500px；
左边距：-330px；
}
.第三{
字体系列：helvetica neue，arial，无衬线；
字体大小：40px；
字体重量：较轻；
线高：0px；
位置：相对位置；
顶部：5px；
边缘底部：70像素；
宽度：500px；
左边距：-330px；
}
.第四{
字体系列：helvetica neue，arial，无衬线；
字体大小：20px；
字体重量：较轻；
线高：0px；
位置：相对位置；
顶部：30px；
宽度：500px；
左边距：-335px；
背景色：白色；
用你的课本交换
为了一本你想要的教科书
和一个同学在校园里
现在。

因为您使用的是负边距，所以它隐藏在屏幕中

---

而且你的链接在我的chrome浏览器中运行良好

我不知道你的意思。我想说的是，当我缩小时，内容会聚集在左上角，就像这样。是的，这会发生，因为你是以像素而不是以百分比工作，所以当缩小内容时。它不应该在任何浏览器中工作。使用百分比生成它们定位并使用媒体查询随屏幕更改字体大小

.second {
font-family: helvetica neue, arial, sans-serif;
font-size: 30px;
font-weight: lighter;
line-height: 5px;
position: relative;
top: 5px;
width: 500px;
margin-left: -330px;

}

.third {
font-family: helvetica neue, arial, sans-serif;
font-size: 40px;
font-weight: lighter;
line-height: 0px;
position: relative;
top: 5px;
margin-bottom: 70px;
width: 500px;
margin-left: -330px;
}

.fourth {
font-family: helvetica neue, arial, sans-serif;
font-size: 20px;
font-weight: lighter;
line-height: 0px;
position: relative;
top: 30px;
width: 500px;
margin-left: -335px;
background-color: white;


<p class="second"><b>Barter</b> a textbook <b>you have</b></p>
<p class="second">for a textbook <b>you want</b></p>
<p class="second">with a fellow <b>Aggie</b> on campus,</p>
<p class="third"><b><i>now</i></b>.</p> 

margin-left: -330px;