Wie kann ich ein Element absolut horizontal positionieren und vertikal fixieren?

Element absolut horizontal und fest vertikal positionieren

Das Ziel besteht darin, eine Schaltfläche zu erstellen, die einen festen Abstand vom rechten Rand eines anderen Elements einhält Unabhängig von der Größe des Ansichtsfensters beim vertikalen Scrollen mit Fenster.

Lösung

Um dies zu erreichen, können wir eine Kombination von CSS-Positionierungseigenschaften verwenden:

<div class="container">
  <div class="button"></div>
</div>

CSS:

.container {
  position: relative;
}

.button {
  position: absolute;
  right: 10px;  /* Distance from the right edge of the container */
  top: 100px;   /* Distance from the top of the viewport */
}

Indem wir die Position von .button auf absolut setzen, machen wir sie unabhängig vom normalen Dokumentenfluss. Die Eigenschaft right gibt den horizontalen Abstand vom rechten Rand des Containers an, während top den vertikalen Abstand vom oberen Rand des Ansichtsfensters definiert.

Hinweis: Diese Lösung erstellt ein festes Element horizontal relativ zu seinem Container positioniert und erfüllt die Bedingung „vertikal fixiert, absolut horizontal“ in der Frage.

Das obige ist der detaillierte Inhalt vonWie kann ich ein Element absolut horizontal positionieren und vertikal fixieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!