Relative Positionierung

Setzen Sie das Attribut position des Elements auf relative, und sein Layout entspricht dem static -Element. Die gerenderte Box bewegt sich dann vertikal basierend auf den Attributen top oder bottom und/oder horizontal basierend auf den Attributen left oder right. Die Eigenschaften top, right, bottom, left und left: 20px werden verwendet, um die Entfernung anzugeben, die das Box nach dem Rendering bewegt. Ein positiver Wert zeigt an, dass sich das Box von dieser Position und in die entgegengesetzte Richtung entfernen wird. Verschieben Sie beispielsweise right: -20px die Box nach rechts um 20 Pixel. Wenn Sie einen negativen Wert auf die entgegengesetzte Richtung anwenden, wird der gleiche Effekt erzielt: left: 20px hat den gleichen Effekt wie auto. Der Anfangswert dieser Eigenschaften beträgt left, wodurch der berechnete Wert 0 (Null) - dh keine Bewegung auftritt. Offensichtlich ist es nicht sinnvoll, für dasselbe Element right und left zu spezifizieren, da die Position überstört wird. Wenn die Inhaltsrichtung von links nach rechts ist, wird der Wert right verwendet und right wird ignoriert. In der rechten nach links Richtung gewinnt der top -Winkel. Wenn sowohl bottom als auch top angegeben werden, wird bottom verwendet und

wird ignoriert. Da sich nur der gerenderte Kasten bewegt, wenn es sich um die Positionierungselemente handelt, ist dieses Positionierungsschema nicht praktikabel, um Inhaltsspalten festzulegen. Die relative Positionierung wird häufig in Fällen verwendet, in denen eine Box mehrere Pixel bewegt werden muss, obwohl sie auch in Verbindung mit negativen Rändern an schwimmenden Elementen für einige komplexere Layouts verwendet werden kann.

Die Steuerung enthält Block

position Eine Nebenwirkung der relativen Positionierung ist sehr bequem: Das relative Positionierungselement ist "lokalisiert", was bedeutet, dass es zu einem Einschlussblock für alle absoluten Positions -Nachkommen wird. Dies gibt uns ein benutzerfreundliches Tool, um zu steuern, wo der Block enthalten ist: Stellen Sie einfach relative auf

fest, ohne die Box selbst zu verschieben.

FAQ bei der relativen Positionierung von CSS

Was ist der Unterschied zwischen der relativen Positionierung und der absoluten Positionierung von CSS?

position In CSS wird das Attribut position verwendet, um den Positionierungsmethode des Elements anzugeben. Es gibt fünf verschiedene Werte von static: relative, fixed, absolute, sticky,

und

. Die relative Positionierung und die absolute Positionierung sind die beiden am häufigsten verwendeten Methoden. top right relative Positionierung bezieht sich auf die Positionierung eines Elements relativ zu seiner normalen Position. Dies bedeutet, dass die Eigenschaften bottom, left,

und

das Element von seiner normalen Position bewegt werden. Andere Elemente werden jedoch nicht an die von den Elementen hinterlassenen Lücken eingestellt.

Andererseits ermöglicht die absolute Positionierung Elemente relativ zum nächsten positionierten Vorfahren. Wenn ein absolut positioniertes Element keinen positionierten Vorfahr hat, wird es den Dokumentkörper verwenden und sich als Seitenrollen bewegen.

Wie funktioniert das Z-Index-Attribut mit der relativen Positionierung?

Das

-attribut im z-index cs steuert die vertikale Stapelreihenfolge der überlappenden Elemente. Daher kann es mit der relativen Positionierung verwendet werden, um die Anzeigereihenfolge überlappender Elemente zu steuern. Das Attribut z-index gilt nur für positionierte Elemente (position: absolute, position: relative, position: fixed oder position: sticky).

Elemente mit höheren z-index -Werten werden vor Elementen mit niedrigeren z-index -Werten angezeigt. Wenn nicht angegeben ist, sind die Elemente in der Reihenfolge gestapelt, die sie im HTML -Dokument erscheinen. z-index

Kann ich prozentuale Werte als obere, rechte, untere und linke Eigenschaften in der relativen Positionierung verwenden?

Ja, Sie können Prozentwerte als

, top, right und bottom in der relativen Positionierung verwenden. Wenn Sie einen prozentualen Wert verwenden, ist er relativ zur Größe des Elements, das den Block enthält. Wenn Sie beispielsweise left festlegen, wird das Element die Hälfte seiner Blockhöhe nach unten bewegen. top: 50%

Was passiert, wenn ich nur eine Richtung (z. B. oben oder links) für die relative Positionierung angibt?

Wenn Sie nur eine Richtung (z. B.

oder top) für die relative Positionierung angeben, wird sich das Element entsprechend dem angegebenen Wert aus dieser Richtung bewegen. Die andere Seite (left oder right) ist nicht betroffen und das Element bewegt sich nicht von dieser Seite. bottom

Kann ich die relative Positionierung mit Anzeige: Flex oder Anzeige: Grid verwenden?

Ja, Sie können die relative Positionierung mit

oder display: flex verwenden. Das Attribut display: grid ist unabhängig vom Attribut position, sodass Sie eine beliebige Positionierungsmethode mit jedem Anzeigetyp verwenden können. Denken Sie jedoch daran, dass einige Kombinationen aufgrund der Art und Weise, wie diese Eigenschaften interagieren, möglicherweise nicht die erwarteten Ergebnisse erzielen. display

Wie wirkt sich die relative Positionierung auf den Prozess des Dokuments aus?

Relative Positionierung entzieht keine Elemente aus normalen Dokumentströmen. Stattdessen ändert es die Position des Elements, ohne das umgebende Layout zu ändern. Dies bedeutet, dass der Raum des Elements im Layout bleibt, als ob er in seiner normalen Position wäre.

Kann ich negative Werte als obere, rechte, untere und linke Eigenschaften in der relativen Positionierung verwenden?

Ja, Sie können negative Werte als

, top, right und bottom in der relativen Positionierung verwenden. Ein negativer Wert bewegt das Element in die entgegengesetzte Richtung. Wenn Sie beispielsweise left festlegen, verschiebt es das Element um 20 Pixel. top: -20px

Was ist der Zweck der relativen Positionierung in CSS?

Die relative Positionierung in CSS wird verwendet, wenn Sie die Position des Elements anpassen möchten, ohne das Layout anderer Elemente zu beeinflussen. Es ist auch nützlich, wenn Sie einen Kontext für absolut positionierte Kinderelemente erstellen möchten.

Wie interagiert die relative Positionierung mit anderen CSS -Eigenschaften wie Rand, Polsterung und Rand?

margin, padding und border Eigenschaften beeinflussen die Größe des Elements und den umgebenden Raum. Diese Eigenschaften funktionieren genauso wie die relative Positionierung auf die gleiche Weise wie normale Prozesse. Relativ positionierte top, right, bottom und left Eigenschaften bewegen Elemente aus ihrer normalen Position, beeinflussen jedoch nicht die Größe des Elements oder den Raum um sie herum.

Kann ich die oberen, rechten, unteren und linken Eigenschaften relativer Positionierungselemente animieren?

Ja, Sie können CSS -Übergänge oder Animationen verwenden, um die Eigenschaften top, right, bottom und left relative Positionierungselemente zu animieren. Dies kann verschiedene Effekte erzeugen, wie z. B. Elemente, die von außerhalb des Bildschirms hineinrutschen oder sich auf der Seite bewegen.

Das obige ist der detaillierte Inhalt vonRelative Positionierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!