Wie kann man ein Element relativ zu einem Div vertikal fixieren und horizontal positionieren?-CSS-Tutorial-php.cn

Wie kann man ein Element relativ zu einem Div vertikal fixieren und horizontal positionieren?

Patricia Arquette

Freigeben： 2024-12-01 12:01:11

Original

476 Leute haben es durchsucht

How to Vertically Fix and Horizontally Position an Element Relative to a Div?

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 unabhängig vom Ansichtsfenster einen bestimmten Abstand vom rechten Rand eines Div bei Größe.

Lösung:

Horizontale Positionierung:

Während eine „absolute horizontale“ Positionierung mit den bereitgestellten Mitteln technisch nicht erreichbar ist Mit dieser Lösung kann das Ziel, einen festen Abstand zum 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 fixiert mithilfe der Eigenschaft „position:fixed“. 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:

<body>
  <div class="inflow">
    <div class="positioner">
      <div class="fixed"></div>
    </div>
  </div>
</body>

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

Schlüssel Überlegungen:

Das div.positioner div ist möglicherweise nicht erforderlich, wenn das div.inflow div eine feste Breite hat, was eine direkte Einstellung des linken Randes des festen Elements ermöglicht.
Das Festlegen von Überlauf: Ausgeblendet im Container-Div hat keinen Einfluss auf die Positionierung des festen Elements außerhalb seiner Grenzen.

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