Wie fixiert man ein Element vertikal und positioniert es absolut horizontal?

So positionieren Sie ein Element vertikal fixiert und absolut horizontal

In der Webentwicklung ist es oft notwendig, Elemente auf eine bestimmte Weise zu positionieren Dies bleibt unabhängig von der Größe des Ansichtsfensters konsistent. Ein solches Szenario besteht darin, ein Element vertikal zu fixieren und gleichzeitig einen bestimmten horizontalen Abstand zu einem anderen Element einzuhalten.

Stellen Sie sich die folgende Herausforderung vor: Sie benötigen eine Schaltfläche, um einen konsistenten Abstand von der rechten Seite eines Container-Divs beizubehalten. Die Schaltfläche sollte an einer festen vertikalen Position innerhalb des Ansichtsfensters bleiben, unabhängig von der Größe des Ansichtsfensters.

Erreichen der gewünschten Positionierung

Dies ist durch die Verwendung von möglich die Kombination aus Position: fest und Position: absolut, wie im folgenden Code gezeigt:

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

.container {
  width: 200px;
  height: 1000px;
  border: 1px solid blue;
  float: right;
  position: relative;
  margin-right: 100px;
}
.button {
  width: 80px;
  border: 1px solid red;
  height: 100px;
  position: fixed;
  top: 60px;
  margin-left: 15px;
}

The Der Schlüssel zu diesem Ansatz liegt darin, dass die Links-/Rechts-Eigenschaften für das .button-Element nicht explizit festgelegt werden. Stattdessen werden das Container-Div und ein zusätzliches Div (.positioner) verwendet, um die horizontale Positionierung festzulegen.

Das .button-Element erbt seine horizontale Position vom .container-Div, während das .positioner-Div den .button drückt zur rechten Seite des Containers div. In diesem Beispiel behält das .button-Element einen Abstand von 15 Pixeln vom rechten Rand des Container-Div bei.

Darüber hinaus stellt die feste vertikale Position des .button-Elements (oben: 60 Pixel) sicher, dass es an dieser vertikalen Position bleibt innerhalb des Ansichtsfensters, während die Seite scrollt.

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