當我添加新代碼時，物品離開螢幕

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;，這可能會導致內容在視口中無法容納時出現滾動條，如果您希望內容可滾動，那麼沒問題，但是如果您希望新內容適應而不滾動，您可能需要調整佈局或內容結構。