Wenn ich neuen Code hinzufüge, verschwindet das Element vom Bildschirm

Question

Ich arbeite gerade an meinem Portfolio und jedes Mal, wenn ich versuche, neuen Code/neue Elemente zu meinem Abschnitt hinzuzufügen, wird das aktuelle Element nach oben und aus dem Ansichtsfenster verschoben. Ich bin nicht sicher, was dies in meinem Code verursacht. Ich verwende JSX und habe das Gefühl, dass das Problem bei meinen app.js und app.css liegt, die die gesamte React-Anwendung bestimmen. Das ist mein aktuelles 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;
  }
}

Ich dachte, es könnte ein Problem sein, wenn die Höhe nicht hoch genug ist, aber egal wie hoch ich sie einstelle, es funktioniert nicht. Es könnte auch ein Problem mit der Positionierung sein, aber ich habe versucht, die Positionierung der Oberseite weiter anzupassen, aber das würde viele Dinge beeinflussen. Ich habe den größten Teil des Codes basierend auf dieser Positionierung angepasst, bitte helfen Sie mir. Danke!

Answer 1

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

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

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