CSS-Layout - position-Eigenschaft

position Die Eigenschaft legt den Typ der Positionsverwaltungsmethode des Elements fest (static, relative, fixed, absolute oder sticky).

position-Eigenschaft

position Die Eigenschaft legt die Art der Positionierungsmethode für das Element fest.

Es gibt fünf verschiedene Positionswerte:

  • static
  • relative
  • fixed
  • absolute
  • sticky

Elemente werden tatsächlich mit top, bottom, left und right Eigenschaften positioniert. Aber diese Eigenschaften funktionieren nicht, es sei denn, die position-Eigenschaft wurde zunächst gesetzt. Abhängig von verschiedenen position-Werten arbeiten sie unterschiedlich.

position: static;

HTML-Elemente haben standardmäßig die Positionsmethode static (static).

Statische positionierte Elemente sind von den top, bottom, left und right Eigenschaften unberührt.

position: static; Elemente werden nicht auf spezielle Weise positioniert; sie werden immer entsprechend dem normalen Fluss der Seite positioniert:

Dieses <div>-Element hat position: static; eingestellt;

Dies ist der verwendete CSS:

Example

div.static {
  position: static;
  border: 3px solid #73AD21;
}

Try it yourself

position: relative;

position: relative; Elemente werden relativ zu ihrer normalen Position positioniert.

Die Einstellung der top, right, bottom und left Eigenschaften für ein relativ positioniertes Element führt dazu, dass es von seiner normalen Position abweicht, um sich anzupassen. Es wird nichts anderes angepasst, um den Raum zu kompensieren, den der Element gelassen hat.

Dieser <div>-Element hat position: relative; eingestellt;

Dies ist der verwendete CSS:

Example

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

Try it yourself

position: fixed;

position: fixed; Elemente sind relativ zur Ansicht positioniert, was bedeutet, dass sie auch wenn die Seite gescrollt wird, immer an derselben Position bleiben. top, right, bottom und left Eigenschaften werden verwendet, um dieses Element zu positionieren.

Feste positionierte Elemente lassen keine Lücken im Bereich der Seite, wo sie normalerweise platziert werden.

Bitte beachten Sie diesen festen Element im rechten unteren Ecke der Seite. Dies ist der verwendete CSS:

Example

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}

Try it yourself

Dieser <div>-Element hat position: fixed; eingestellt;

position: absolute;

position: absolute; Elemente werden relativ zum nächsten positionierten Vorfahren-Element positioniert (statt relativ zur Ansicht, wie fixed).

Allerdings, wenn ein absolut positioniertes Element keine Vorfahren hat, verwendet es den Dokumentkörper (body) und bewegt sich mit der Seite zusammen.

Note:Ein "positionierter" Element ist der Ort des Elements abgesehen von static alle anderen Elemente.

Dies ist ein einfaches Beispiel:

Dieser <div>-Element hat position: relative; eingestellt;
Dieser <div>-Element hat position: absolute; eingestellt;

Dies ist der verwendete CSS:

Example

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
} 
div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

Try it yourself

position: sticky;

position: sticky; elements are positioned based on the user's scroll position.

Sticky elements are positioned relative to the scroll position (relative) and fixed (fixed) to switch between.

Note:Internet Explorer, Edge 15 and earlier versions do not support sticky positioning. Safari requires the -webkit- prefix (see the example below). You must also specify at least top,right,bottom or left one, so that sticky positioning takes effect.

In this example, the sticky element will stay at the top of the page when it reaches its scroll position (top: 0)

Example

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

Try it yourself

Overlapping elements

When positioning elements, they can overlap with other elements.

z-index The property specifies the stacking order of the element (which element should be placed in front of or behind other elements).

Elements can be set to a positive or negative stacking order:

This is a title

Since the z-index of the image is -1, it is behind the text.

Example

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

Try it yourself

Elements with a higher stacking order are always in front of elements with a lower stacking order.

Note:If two positioned elements overlap and are not specified z-indexIf the last element in the HTML code is displayed at the top.

Position text in the image

How to place text on an image:

Example

CodeW3C.com Logo
Bottom Left
Top Left
Top Right
Bottom Right
Centered

Try it yourself:

Top Left Top Right Bottom Left Bottom Right Centered

More examples

Set the shape of the element
This example demonstrates how to set the shape of an element. The element is clipped to this shape and displayed.

All CSS positioning properties

Property Description
bottom Set the bottom margin edge of the positioning box.
clip Schneiden der Elemente mit absoluter Position.
left Setzen der linken Außenrandkante des Positionierungsfeldes.
position Bestimmen des Positionierungstyps des Elements.
right Setzen der rechten Außenrandkante des Positionierungsfeldes.
top Setzen der oberen Außenrandkante des Positionierungsfeldes.
z-index Setzen des Stacking-Orders der Elemente.

Erweiternde Lektüre

Extrakapitel:CSS Positionsoverview

Extrakapitel:CSS Relative-Position

Extrakapitel:CSS Absolute-Position