Heim >Web-Frontend >CSS-Tutorial >Relative Positionierung mit CSS

Relative Positionierung mit CSS

PHPz
PHPznach vorne
2023-08-27 15:13:021279Durchsuche

使用 CSS 进行相对定位

Relative Positionierung ändert die Position eines HTML-Elements relativ zu seiner normalen Anzeigeposition. „left:20“ fügt also 20 Pixel zur LINKEN Position des Elements hinzu.

Sie können die beiden Werte top und left zusammen mit dem attribute verwenden, um das HTML-Element an eine beliebige Position im HTML-Dokument zu verschieben.

  • Nach links verschieben – Verwenden Sie negative Werte für nach links.
  • Nach rechts bewegen – Positive Werte für links verwenden.
  • Nach oben verschieben -Negative Werte für die Spitze verwenden.
  • Nach unten bewegen – Verwenden Sie oben positive Werte.

Beispiel

Sie können versuchen, den folgenden Code auszuführen, um eine relative Positionierung zu erreichen -

<html>
   <head>
   </head>
      <body>
         <div style = "position:relative;left:80px;top:2px;background-color:yellow;">
            This div has relative positioning.
         </div>
      </body>
</html>

Das obige ist der detaillierte Inhalt vonRelative Positionierung mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen