So positionieren Sie ein Element vertikal fest und horizontal absolut

Problem:

Ein Benutzer möchte eine Schaltfläche erstellen, die Behält einen festen vertikalen Abstand vom Ansichtsfenster bei und behält gleichzeitig einen bestimmten Abstand vom rechten Rand eines Div bei, unabhängig vom Ansichtsfenster Größe.

Lösung:

Horizontale Positionierung:

Während eine „absolute horizontale“ Positionierung mit den bereitgestellten Elementen technisch nicht erreichbar ist Lösung kann das Ziel, einen festen Abstand vom rechten Rand des Div einzuhalten, erreicht werden. Indem die linken oder rechten Eigenschaften für das horizontal fixierte Element nicht festgelegt werden, werden die Container-Divs verwendet, um seine horizontale Position zu steuern.

Vertikale Positionierung:

Das Element wird positioniert vertikal mit der Eigenschaft „position:fixed“ fixiert. Durch Festlegen eines Spitzenwerts bleibt die vertikale Positionierung unabhängig von der Größe des Ansichtsfensters erhalten.

Codebeispiel:

Der folgende Code demonstriert die Implementierung:

HTML:

CSS:

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

Wichtige Überlegungen:

• Das div.positioner div ist möglicherweise nicht erforderlich, wenn das div.inflow div eine feste Breite hat, was eine direkte Einstellung von ermöglicht Der linke Rand des festen Elements.
• Das Festlegen von „overflow: versteckt“ im Container-Div hat keinen Einfluss auf die Positionierung des festen Elements außerhalb seines Grenzen.