Apabila saya menambah kod baharu, item itu meninggalkan skrin

Question

Saya sedang mengusahakan portfolio saya dan setiap kali saya cuba menambah kod/item baharu pada bahagian saya, item semasa akan ditolak ke atas dan keluar dari port pandangan. Saya tidak pasti apa yang menyebabkan perkara ini dalam kod saya. Saya menggunakan JSX dan saya rasa masalahnya adalah dengan app.js dan app.css saya, yang menentukan keseluruhan aplikasi React. Ini CSS semasa saya:

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;
  }
}

Saya fikir ia mungkin masalah tidak cukup tinggi, tetapi tidak kira berapa tinggi saya meletakkannya ia tidak berfungsi. Ia juga boleh menjadi masalah dengan kedudukan, tetapi saya cuba melaraskan kedudukan bahagian atas lebih banyak, tetapi ia akan menjejaskan banyak perkara, saya telah melaraskan kebanyakan kod berdasarkan kedudukan ini, tolong bantu. Terima kasih!

Answer 1

1. Anda menyebut bahawa anda cuba melaraskan kedudukan, tetapi itu menyebabkan masalah, bagaimanapun, anda mungkin perlu menilai semula kedudukan elemen untuk memastikan ia tidak bertindih atau ditolak, jadi anda mungkin perlu melaraskan top或margin-top nilai item sedia ada untuk Mengelakkannya daripada ditolak ke atas

2. body元素使用了height: 300vh;，这意味着body的高度始终是视口高度的3倍，如果内容超出了这个高度，可能会出现问题，考虑使用相对单位（如百分比）来设置height Atau biarkan kandungan menentukan ketinggian dan bukannya menggunakan nilai tetap.

3. Anda berada dalam body元素上设置了overflow: auto;, ini mungkin menyebabkan bar skrol muncul apabila kandungan tidak muat dalam port pandangan, jika anda mahu kandungan boleh ditatal maka tiada masalah, tetapi jika anda mahu kandungan baharu muat tanpa menatal anda mungkin perlu laraskan susun atur atau struktur kandungan.