当我添加新代码时，物品离开屏幕

Question

我目前正在制作我的作品集，每次我尝试向我的部分添加新的代码/项目时，当前的项目会被推到顶部并超出视口。我不确定是什么导致我的代码出现这种情况。我正在使用JSX，并且我觉得问题出在我的app.js和app.css上，它们决定了整个React应用程序。这是我的当前CSS：

html{
  font-size: 62.5%;
}

body{
  height: 300vh;
  overflow: auto;

  background: #136a8a;   /*fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #267871,
    #136a8a
    );  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #267871,
    #136a8a
      ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  color: black
}

.pages{
  position: absolute;
  left: 40%;
  top: 40%;
  transform: translate(-40%, -40%);
  font-size: 5rem;
}

/* .scroll{
  padding: 12px;
  height: 2000px;
} */



 @media only screen and (max-width:1322px){
  .pages{
    font-size: 3.5rem;
    padding-top: 1px;
  }
 }
@media only screen and (max-width:900px){
  .pages{
    font-size: 2.7rem;
  }
} 
@media only screen and (max-width:700px){
  .pages{
    font-size: 2rem;
  }
} 
@media only screen and (max-width:500px){
  .pages{
    font-size: 1.5rem;
  }
} 
@media only screen and (max-width:400px){
  .pages{
    font-size: 1.2rem;
  }
} 
@media only screen and (max-width:280px){
  .pages{
    font-size: 1.1rem;
  }
}

我以为可能是高度不够的问题，但无论我把它放多高都不行。也可能是定位的问题，但我试图将顶部的定位调整得更多，但会影响很多东西，我已经根据这个定位调整了大部分的代码，请帮忙。谢谢！

Answer 1

1. 您提到您尝试调整了定位，但是导致了问题，然而，重新评估元素的定位可能是必要的，以确保它们不重叠或被推出，因此您可能需要调整现有项目的top或margin-top值，以防止它们被推上去

2. body元素使用了height: 300vh;，这意味着body的高度始终是视口高度的3倍，如果内容超出了这个高度，可能会出现问题，考虑使用相对单位（如百分比）来设置height，或者让内容决定高度，而不是使用固定值。

3. 您在body元素上设置了overflow: auto;，这可能会导致内容在视口中无法容纳时出现滚动条，如果您希望内容可滚动，那么没问题，但是如果您希望新内容适应而不滚动，您可能需要调整布局或内容结构。