Analysieren Sie den Unterschied zwischen relativ und absolut in der Position von CSS

Position hat die folgenden -Attribute: statisch, erben, fest, absolut, relativ
Die ersten drei sind leicht zu verstehen und zu unterscheiden:
statisch: ist der Standard-Zustand, ohne Positionierung erscheint das Element im normalen Fluss (ohne Berücksichtigung von oben, unten, links, rechts oder z-index-Anweisung). nherit: Erbt den Wert des Positionsattributs
vom übergeordneten Element . behoben: Generieren Sie
absolut positionierte Elemente, die relativ zum Browserfenster positioniert sind. (Das heißt, beim Scrollen im Browser wird das Element immer an einer bestimmten Position im sichtbaren Bereich des Fensters angezeigt).

Absolut und relativ werden häufiger verwendet und können Anfänger verwirren. Was ist der Unterschied zwischen ihnen?

1. Werfen wir zunächst einen Blick auf die Konzepte des W3C

absolut: Erzeugen Sie ein absolut positioniertes Element und positionieren Sie es relativ zum ersten übergeordneten Element, anders als bei der statischen Positionierung.

relativ: Erzeugt ein relativ positioniertes Element, das relativ zu seiner normalen Position positioniert ist.

Der Hauptunterschied zwischen den beiden besteht darin, dass „absolut“ nicht von anderen Elementen im übergeordneten Element beeinflusst wird, während „relativ“ von anderen Elementen im übergeordneten Element beeinflusst wird.

2. Verstehen Sie den Unterschied zwischen absolut und relativ mit einem Bild

Code:

Das obige ist der detaillierte Inhalt vonAnalysieren Sie den Unterschied zwischen relativ und absolut in der Position von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!