Heim > Web-Frontend > Front-End-Fragen und Antworten > So verwenden Sie die Position in h5

So verwenden Sie die Position in h5

尊渡假赌尊渡假赌尊渡假赌
Freigeben: 2023-12-26 13:39:05
Original
804 Leute haben es durchsucht

Mit dem Positionsattribut in H5 kann die Positionierung von Elementen über CSS gesteuert werden: 1. Relative Positionierung, die Syntax lautet „style="position: relative;"; 2. Absolute Positionierung, die Syntax lautet „style="position: absolute". ;“; 3. Feste Positionierung, die Syntax ist „style="position: Fixed;" und so weiter. Dieses Tutorial-Betriebssystem: Windows 10-System, Dell G3-Computer

in H5 (HTML5). Verwenden Sie das Positionsattribut, um die Positionierung von Elementen über CSS zu steuern. Hier sind einige Beispiele für die Verwendung von Position in H5:

So verwenden Sie die Position in h5

Relative Positionierung (relativ):

<div style="position: relative; top: 10px; left: 20px;">
  这是相对定位的元素
</div>
Nach dem Login kopieren

Das div-Element im obigen Code ist relativ zu seiner Normalität Position. Dokumentflussposition, 10 Pixel nach unten und 20 Pixel nach rechts versetzt:

    <div style="position: absolute; top: 50px; right: 0;">
      这是绝对定位的元素
    </div>
    Nach dem Login kopieren
  1. Das div-Element im obigen Code wird relativ zu seinem nächstgelegenen Vorgängerelement positioniert

Feste Positionierung (fest):

    <div style="position: fixed; bottom: 0; right: 0;">
      这是固定定位的元素
    </div>
    Nach dem Login kopieren
  1. Das div-Element im obigen Code wird relativ zum Browserfenster positioniert und bleibt immer am unteren und rechten Rand der Seite .

Sticky-Positionierung (Sticky):

    <div style="position: sticky; top: 10px;">
      这是粘性定位的元素
    </div>
    Nach dem Login kopieren
  1. Das div-Element im obigen Code bleibt relativ positioniert, bis es einen Schwellenwert von 10 Pixeln vom oberen Rand des Ansichtsfensters des Benutzers überschreitet, und wird dann zu einer festen Positionierung
by Durch Festlegen des Positionsattributs und der entsprechenden Positionierungsattribute (z. B. oben, rechts, unten, links) können Sie in H5 unterschiedliche Elementpositionierungseffekte erzielen. Denken Sie daran, den CSS-Code innerhalb des Style-Tags oder in einem externen Stylesheet zu platzieren wirkt sich auf der gesamten Seite aus

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Position in h5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage