Lorsque j'ajoute un nouveau code, l'élément quitte l'écran

Question

Je travaille actuellement sur mon portfolio et chaque fois que j'essaie d'ajouter de nouveaux codes/éléments à ma section, l'élément actuel est poussé vers le haut et hors de la fenêtre. Je ne suis pas sûr de la cause de cela dans mon code. J'utilise JSX et j'ai l'impression que le problème vient de mes app.js et app.css, qui dictent l'ensemble de l'application React. Voici mon CSS actuel :

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

Je pensais que c'était peut-être un problème de ne pas être assez haut, mais peu importe à quelle hauteur je le mets, cela ne fonctionne pas. Cela pourrait aussi être un problème de positionnement, mais j'ai essayé d'ajuster davantage le positionnement du haut, mais cela affecterait beaucoup de choses, j'ai ajusté la plupart du code en fonction de ce positionnement, aidez-moi s'il vous plaît. Merci!

Answer 1

1. Vous avez mentionné que vous avez essayé d'ajuster le positionnement, mais que cela a causé des problèmes. Cependant, il peut être nécessaire de réévaluer le positionnement des éléments pour vous assurer qu'ils ne se chevauchent pas ou ne sont pas repoussés, vous devrez donc peut-être ajuster le top或margin-top valeurs des éléments existants pour éviter qu'ils soient poussés vers le haut

2. body元素使用了height: 300vh;，这意味着body的高度始终是视口高度的3倍，如果内容超出了这个高度，可能会出现问题，考虑使用相对单位（如百分比）来设置height Ou laissez le contenu déterminer la hauteur au lieu d'utiliser une valeur fixe.

3. Vous êtes dans body元素上设置了overflow: auto;, des barres de défilement peuvent apparaître lorsque le contenu ne rentre pas dans la fenêtre d'affichage. Si vous souhaitez que le contenu puisse défiler, pas de problème, mais si vous souhaitez que le nouveau contenu s'adapte sans défilement, vous devrez peut-être le faire. ajuster la mise en page ou la structure du contenu.