Warum erscheint mein absolut positioniertes Element an der falschen Stelle?

Falsch platzierte Elemente: Absolute und feste Positionierung verstehen

Absolute und feste Positionierung in CSS ermöglichen die präzise Platzierung von Elementen innerhalb eines Dokuments oder Ansichtsfensters . Manchmal werden Elemente jedoch möglicherweise nicht dort angezeigt, wo Sie sie erwarten. Dies liegt häufig an einem Missverständnis darüber, wie diese Positionierungsmethoden funktionieren.

Das Problem mit der statischen Positionierung

Wenn ein Element statisch positioniert ist (Standardeinstellung), fließt es mit dem Rest des Dokuments und übernimmt seine Position von umgebenden Elementen. Im gegebenen Beispiel ist das Grey-Box-Div absolut positioniert. Der Container hat jedoch eine relative Position, keine absolute oder feste Position. Dies bedeutet, dass die Greybox weiterhin dem Fluss des Dokuments unterliegt und relativ zur statischen Position des Containers positioniert wird.

Absolute und feste Positionierung

Absolut Durch die Positionierung wird ein Element aus dem Dokumentfluss entfernt und relativ zu seinem nächstgelegenen positionierten Vorgänger positioniert. Wenn kein positionierter Vorgänger vorhanden ist, wird er relativ zum Dokument selbst positioniert. Die feste Positionierung ähnelt der absoluten, positioniert ein Element jedoch relativ zum Ansichtsfenster und nicht zu seinem Vorfahren.

Im ersten Beispiel ist die graue Box absolut positioniert, ihr Container jedoch statisch. Wie bereits erwähnt bedeutet dies, dass die graue Box relativ zur statischen Position des Containers positioniert wird, die sich nicht in der oberen linken Ecke befindet.

Im zweiten Beispiel wird die graue Box vor die verschoben Orange-Box. Dadurch nimmt die Orange-Box den Platz ein, den die Grey-Box eingenommen hätte. Daher erscheint das graue Kästchen nach dem orangefarbenen Kästchen.

Behebung des Problems

Um das graue Kästchen richtig zu positionieren, muss der Container absolut positioniert oder fixiert sein . Dadurch kann die graue Box relativ zur absoluten oder festen Position des Containers und nicht zu seiner statischen Position positioniert werden.

Hier ist der korrigierte Code:

.container {
  background: lightblue;
  position: absolute;
}

Jetzt ist die graue Box Das Feld sollte wie erwartet in der oberen linken Ecke des Containers erscheinen.

Das obige ist der detaillierte Inhalt vonWarum erscheint mein absolut positioniertes Element an der falschen Stelle?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!