Heim >Web-Frontend >CSS-Tutorial >Was bedeutet Position in CSS?

Was bedeutet Position in CSS?

王林
王林Original
2020-11-24 14:27:0711703Durchsuche

Position in CSS ist ein Attribut, das den Positionierungstyp eines Elements angibt. Das Positionsattribut definiert den Positionierungsmechanismus, der zum Festlegen des Layouts des Elements verwendet wird. Jedes Element kann positioniert werden, aber absolute oder feste Elemente erzeugen unabhängig vom Typ des Elements selbst ein Feld auf Blockebene.

Was bedeutet Position in CSS?

Umgebung:

Dieser Artikel gilt für alle Computermarken.

(Lernvideo-Sharing: CSS-Video-Tutorial)

Attributeinführung:

Das Positionsattribut gibt den Positionierungstyp des Elements an.

Dieses Attribut definiert den Positionierungsmechanismus, der zum Festlegen des Layouts des Elements verwendet wird. Jedes Element kann positioniert werden, aber absolute oder feste Elemente erzeugen eine Box auf Blockebene, unabhängig vom Typ des Elements selbst. Ein relativ positioniertes Element wird im normalen Fluss von seiner Standardposition versetzt.

Attributwert:

  • absolute Erzeugt ein absolut positioniertes Element, das im Gegensatz zur statischen Positionierung relativ zum ersten übergeordneten Element positioniert ist. Die Position des Elements wird durch die Attribute „left“, „top“, „right“ und „bottom“ angegeben.

  • fixed Erzeugt absolut positionierte Elemente, die relativ zum Browserfenster positioniert sind. Die Position des Elements wird durch die Attribute „left“, „top“, „right“ und „bottom“ angegeben.

  • relative Erzeugt relativ positionierte Elemente, die relativ zu ihrer normalen Position positioniert sind. Daher fügt „left:20“ 20 Pixel zur LINKEN Position des Elements hinzu.

  • statischer Standardwert. Ohne Positionierung erscheint das Element im normalen Fluss (oben, unten, links, rechts oder Z-Index-Deklarationen werden ignoriert).

  • inherit gibt an, dass der Wert des Positionsattributs vom übergeordneten Element geerbt werden soll.

Beispiel:

Positionierung des h2-Elements:

h2
  {  
  position:absolute;
  left:100px;
  top:150px;
  }

Verwandte Empfehlungen: CSS-Tutorial

Das obige ist der detaillierte Inhalt vonWas bedeutet Position in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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