Über diese Site

Um komplexere Layouts zu erstellen, müssen wir über die position-Eigenschaft reden. Sie hat mehrere mögliche Werte, deren Namen keinen Sinn machen und unmöglich zu merken sind. Lass sie uns nacheinander durchgehen. Aber vielleicht solltest du diese Seite in deinen Bookmarks speichern.

static

.static {
  position: static;
}

static ist der Standardwert. Ein Element mit position: static; wird auf keine besondere Art positioniert. Ein Element mit diesem Wert wird als nicht positioniert bezeichnet und ein Elemement mit jedem anderen Wert für die Position als positioniert.

</div>

relative

.relative1 {
  position: relative;
}
.relative2 {
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
}

relative verhält sich genau wie static außer es werden weitere Eigenschaften gesetzt.

</div>

Setzt man die Eigenschaften top, right, bottom, and left eines relativ positionten Elementes passt sich dessen Position relativ zu seiner normalen Position an. Der restliche Inhalt wird nicht angepasst um die Lücke, die das Element hinterlassen hat, zu füllen.

</div>

fixed

Hallo! Ignorier mich erst einmal.

</div>

Ein fixiertes Element wird relativ zum Viewport platziert. Das heißt, das Element bleibt an der selben Stelle, auch wenn die Seite gescrollt wird. Wie bei relative werden die Eigenschaften top, right, bottom und left benutzt

Sicher hast du das fixierte Element in der unteren rechten Ecke dieser Seite bemerkt. Hiermit erlaube ich dir, ihm deine Aufmerksamkeit zu schenken. Hier ist der CSS Code, der es da hingebracht hat:

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: white;
}

Ein fixiertes Element hinterlässt keine Lücke, wo es normalerweise auf der Seite wäre.

Mobile Browser unterstützen fixed erstaunlich schlecht. Hier erfährst du mehr über diese Situation.

absolute

absolute ist der kniffeligste position-Wert. absolute verhält sich wie fixed aber relativ zum nächten positionierten Ancestor statt relativ zum Viewport. Hat ein absolut positioniertes Element keinen positionierten Ancestor, benutzt es den document body und bewegt sich auch mit der gescrollten Seite. Zur Erinnerung: Ein "positioniertes" Element ist eines das als Position irgendeinen Wert außer static hat.

Hier ist ein Beispiel:

.relative {
  position: relative;
  width: 600px;
  height: 400px;
}
.absolute {
  position: absolute;
  top: 120px;
  right: 0;
  width: 300px;
  height: 200px;
}

Dieses Element ist relativ positioniert. Wäre es position: static; würde sein absolut positionieres child ausbrechen und am document body ausgerichtet.

Dieses Element ist absolut positioniert. Es wird relativ zum Elternelement positioniert.

</div>

Dieser Kram ist schwierig, aber es ist wichtig um großartige CSS Layouts zu erstellen. Auf der nächsten Seite benutzen wir position in einem praktischeren Beispiel.

Zurück Weiter