Absolute Positionierung innerhalb der absoluten Positionierung

Bei der Arbeit mit Webseiten-Layouts werden häufig Positionierungstechniken wie die absolute Positionierung verwendet, um Elemente präzise darin anzuordnen eine Seite. Allerdings entsteht ein potenzielles Problem, wenn Sie versuchen, eine absolute Positionierung innerhalb eines Elements anzuwenden, das selbst absolut positioniert ist.

Angenommen, Sie haben ein Containerelement (1. Div) mit relativer Positionierung (position:relative), was Ihnen ermöglicht um untergeordnete Elemente relativ zu ihrer eigenen Position zu positionieren. In diesem Container gibt es ein absolut positioniertes Element (2. Div) und ein drittes absolut positioniertes Element (3. Div), das im 2. Div verschachtelt ist.

In diesem Szenario können Sie davon ausgehen, dass das 3. Div absolut positioniert ist relativ zum 1. Div, obwohl auch das 2. Div absolut positioniert ist. Dies ist jedoch nicht der Fall.

Die Positionierungshierarchie verstehen

Der Grund für dieses Verhalten liegt in der Funktionsweise der absoluten Positionierung. Wenn einem Element eine absolute Positionierung zugewiesen wird, wird es aus dem normalen Fluss des Dokuments entfernt und stattdessen relativ zu seinem nächstgelegenen positionierten Vorgänger positioniert. In diesem Fall ist das 2. Div der am nächsten positionierte Vorfahre des 3. Div, unabhängig davon, ob das 1. Div auch eine relative Positionierung hat.

Dies bedeutet, dass die absolute Position des 3. Div relativ zur 2. berechnet wird Die Position der Div, nicht die Position der 1. Div. Infolgedessen erscheint die 3. Div absolut positioniert innerhalb der 2. Div, nicht der 1. Div.

Alternative Positionierungstechnik

Wenn Sie möchten, dass die 3. Div absolut relativ zum 1. Div positioniert ist, müssen Sie es zu einem direkten untergeordneten Element des 1. Div machen. Dadurch kann das 3. Div die absolute Position des 1. Div erben und entsprechend positioniert werden.

Es ist wichtig zu beachten, dass position: absolute die relative Position für untergeordnete Elemente zurücksetzt, genau wie position: relative. Wenn Sie also mehrere absolut positionierte untergeordnete Elemente innerhalb eines relativ positionierten übergeordneten Elements haben, werden deren Positionen unabhängig voneinander berechnet, relativ zu ihrem nächstgelegenen absolut positionierten Vorgänger.