Heim  >  Artikel  >  Web-Frontend  >  Was macht position:relative; in CSS?

Was macht position:relative; in CSS?

黄舟
黄舟Original
2017-07-19 14:39:232202Durchsuche

Ich verstehe immer noch nicht, was position:relative; in CSS bedeutet und was es bewirkt?

Ich verstehe alle anderen Attribute der Position

Zitat

statisch: Keine spezielle Positionierung, das Objekt folgt den HTML-Positionierungsregeln
absolut: Ziehen Sie das Objekt aus dem Dokumentenfluss heraus und verwenden Sie links, rechts, oben, unten und andere Attribute für die absolute Positionierung. Und seine Kaskadierung wird durch das Z-Index-Attribut definiert. Zu diesem Zeitpunkt hat das Objekt keine Ränder, aber es gibt immer noch Abstände und Ränder.
relativ: Das Objekt kann nicht gestapelt werden, sondern wird im normalen Dokumentfluss basierend auf Attributen wie links, rechts, oben und unten versetzt usw.
behoben: IE5. 5 und NS6 unterstützen dieses Attribut noch nicht, außer bei relativ, der Effekt tritt tatsächlich auf schwer zu verstehender Verwandter.

Es handelt sich nicht um eine relative Positionierung.

Für ein statisches div#demo auf der Seite möchte ich, dass ein div#sub in diesem #demo irgendwo in der oberen rechten Ecke relativ zu #demo positioniert wird Fügen Sie dann oben und rechts hinzu, um es einzuschränken.
Verstehe ich es richtig?

In der tatsächlichen Entwicklung erhalte ich jedoch oft nicht die erwarteten Ergebnisse. Ich denke, das liegt daran, dass ich diese Eigenschaft noch nicht vollständig verstanden habe. Jetzt möchte ich das vollständig beherrschen, es wie position:absolute beherrschen und mit HTML-Elementen machen, was ich will.
Bitte Freunde, die das verstehen, können uns davon erzählen oder uns Informationen, Links oder ähnliches zur Verfügung stellen.

Vielen Dank.
Ergänzung zur Frage:
Vielen Dank für den Link, den Sie bereitgestellt haben, aber er ist nicht ausführlich. Ich hoffe, ein detailliertes Verständnis von position:relative zu erhalten.
Ergänzungsfrage:
Reeze, was du gesagt hast, ist sehr gut.
Wie sieht es jedoch mit der Positionierung des Elements selbst aus, das dieses Attribut deklariert? Welche Funktionen hat die eigene Oberseite, die linke, die rechte und die eigene Unterseite?
Wovon Sie sprechen, ist das Verhalten relativer untergeordneter Elemente. Ich möchte etwas über sich selbst wissen.
Zusätzliche Frage:
Haben Sie nicht eine grundlegende Erklärung gegeben?

"Für ein statisches div#demo auf der Seite möchte ich, dass ein div#sub in diesem #demo irgendwo in der oberen rechten Ecke relativ zu #demo positioniert wird. Ich sollte diese Position verwenden: relative this Okay , und dann „top“ hinzufügen, „right“, um es einzuschränken. „

Lassen Sie mich zunächst Ihre Fragen beantworten: Das heißt, für jedes Element gilt, wenn sein Positionsattribut nicht definiert ist, dann seine Position: statisch)

Wenn Sie möchten, dass ein div #sub in dieser #demo relativ zur #demo positioniert werden soll Irgendwo in In der oberen rechten Ecke sollte #demo relativ und #sub absolut positioniert sein.

Absolut wird relativ zum nächstgelegenen übergeordneten Element positioniert. Wenn Sie #demo nicht relativ positionieren, wird die absolute Positionierung von #sub relativ zum Körper positioniert.

relative wird relativ zu sich selbst positioniert, zum Beispiel: #demo{position:relative;top:-50px;}, dann verschiebt sich #demo um 50px relativ zu seiner ursprünglichen Position.

Anderes: Relativ bricht nicht vom Dokumentenfluss ab, absolute bricht vom Dokumentenfluss ab. Das heißt: Obwohl das relative Element scheinbar von seiner ursprünglichen Position abgewichen ist, bleibt es im Dokumentenfluss tatsächlich unverändert. Das absolute Element verändert nicht nur seine Position, sondern bricht auch aus dem Dokumentenfluss aus.

hat ein Beispiel wie folgt geschrieben:

Das obige ist der detaillierte Inhalt vonWas macht position:relative; in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn