Wie kann ich beim Scrollen ein Element vertikal fixiert und absolut horizontal positionieren?

Element vertikal fest und absolut horizontal positionieren

Der Benutzer suchte nach einer Lösung für eine Schaltfläche, die unabhängig von der Größe des Ansichtsfensters einen festgelegten Abstand vom rechten Rand eines Divs einhält , während Sie mit dem Fenster scrollen. Dies kann mit der folgenden Strategie erreicht werden:

HTML-Struktur

<div class="inflow">
  <div class="positioner"> <!-- May not be needed -->
    <div class="fixed"></div>
  </div>
</div>

CSS-Styling

div.inflow {
  width: 200px;
  height: 1000px;
  border: 1px solid blue;
  float: right;
  position: relative;
  margin-right: 100px;
}

div.fixed {
  width: 80px;
  border: 1px solid red;
  height: 100px;
  position: fixed;
  top: 60px;
  margin-left: 15px;
}

Wichtige Punkte

• Fixierte vertikale Position: Die Position: Fixed auf div.fixed stellt sicher, dass mit dem gescrollt wird Fenster.
• Absolute horizontale Position: Die feste horizontale Position wird nicht direkt festgelegt. Stattdessen verlässt es sich auf die Wrapper-Divs (div.inflow und optional div.positioner), um seine Position relativ zum übergeordneten Div zu definieren.
• Dynamische Anpassung: Wenn sich die Größe des Container-Div ändert, Die Schaltfläche behält ihren gewünschten Abstand vom rechten Rand bei.
• Überlaufbehandlung: Das Element mit fester Position ist Vom Überlaufkontext seines Container-Div ausgenommen, auch wenn die Eigenschaft overflow:hidden festgelegt ist.

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