Hallo, willkommen zurück.
Heute werden wir über die Positionierung von Elementen in Ihrer Webseite sprechen. Wenn Sie
also versuchen, Ihre Seite und
Ihre Codierung zu gestalten, wird wahrscheinlich eines der zeitaufwendigsten und möglicherweise
frustrierendsten Dinge sein, die Sie in diesem gesamten Kurs tun werden.
Und das ist einer der Gründe, warum ich fast die ganze Woche verlassen habe,
um zu üben, Dinge auf Ihrer Seite auszulegen.
Die Ideen selbst sind sehr einfach und unkompliziert, aber
es ist die Zusammenstellung, wie Sie mehr und
mehr zu Ihrer Seite hinzufügen, wo die Dinge ein wenig knifflig werden können.
Lassen Sie uns also beginnen, über die verschiedenen Positionierungselemente zu sprechen
, oder über die verschiedenen Positionierungseigenschaften, die Sie verwenden können, okay?
Die vier Positionseigenschaften sind statisch, relativ, absolut und
fest, und größtenteils unterscheiden sie sich sehr unterschiedlich.
Wie sie zusammenarbeiten oder wie sie funktionieren, ist, dass jede von ihnen
auch durch Eigenschaften wie oben, rechts, unten und links geändert werden kann.
Also sagen Sie, welche Art von Position Sie das Element haben wollen, und
dann können Sie sagen, aber ich möchte, dass es so weit von oben oder
so hoch von unten oder so weit von links ist.
Beginnen wir also mit statisch, und der Grund, warum wir mit statisch beginnen werden,
ist, dass Sie es bereits die ganze Zeit verwendet haben.
Es ist, was wir den Standardwert für Elemente nennen.
Wenn du nichts anderes sagst, wird es darauf eingestellt sein.
Wie es funktioniert, ist, dass der Browser jedes Element
nur an der nächsten verfügbaren Position platzieren wird.
Sie können ihm Werte wie oben, unten, links und rechts geben, aber
der Browser wird es vollständig ignorieren.
Wie es funktionieren wird, ist so etwas.
Mal sehen, ob ich das hier aufstellen kann.
Sie haben Ihren Bildschirm.
Und dann ist es Zeit, Dinge zu Ihrer Seite hinzuzufügen, und der Browser geht, oh,
na ja, das ist Spanne, so dass es genau hier passt.
Und die nächste Spannweite, also passt es genau hier.
Oh, sie hat etwas, das Block ist, also muss ich hier runtergehen.
Wenn Sie hinzufügen, beginnt es einfach an der Spitze und funktioniert einen Weg über und dann nach unten.
Aber wir können darüber hinausgehen.
Wir können ändern, wie der Browser Dinge positioniert, und
eine der Möglichkeiten, die wir tun können, ist die Verwendung der Position relativ.
Und wenn ich relativ sage, meine ich relativ zu sich selbst.
Wo würde es hingehen?
In Ordnung, lasst es uns ein bisschen rüber kommen.
Es ist im Grunde sehr ähnlich der statischen Position, aber
jetzt können Sie diese Offsets hinzufügen.
Die neue Positionierung, der neue Ort, an dem wir
das Element setzen, wird es keinen seiner Nachbarn beeinflussen.
Stattdessen, was es tun kann, ist Löcher zu lassen
, wo der Browser dachte, es hätte in erster Linie gewesen sein sollen.
In der Regel werden relativ positionierte Elemente als Container oder
Blöcke für andere Elemente verwendet.
Also lassen Sie mich Ihnen hier ein weiteres kurzes Beispiel zeigen.
Schalten Sie das ein.
Ich habe mein Browserfenster, und sagen wir, ich bin dabei, ein Spannelement einzubauen, und
es wird genau dort hingehen.
Nun, stattdessen, wenn Sie sagen, dass die Position relativ ist,
und Sie geben ihr eine Art Nummer wie Top Ten, anstatt sie hier zu platzieren,
wird sie tatsächlich darunter gehen, wo sie sein sollte.
Also nochmal, wir fügen nur kleine Zahlen hinzu, um Dinge von dort zu verschieben, wo sie
normalerweise hingehen würden.
Die nächste Position ist das, was wir absolut nennen.
Und dieser kann Menschen wirklich verwirren, wenn Sie es zum ersten Mal starten,
weil der Browser, anstatt es in die nächste verfügbare Position zu bringen,
ignoriert er alle Elemente und schaut wirklich nur auf den Hauptcontainer, in dem er sich befand.
In diesem Fall zeigen wir ein Beispiel mit dem Browser.
Die anderen Elemente auf der Seite verhalten sich so, als ob sie nicht einmal existieren.
Und was das dazu führen kann, ist, dass man mit einem Element übereinander enden kann.
Also, lasst uns das versuchen.
Ich habe meinen Browser.
Ich habe hier nicht viel Platz.
Also genau hier. Und sagen wir, ich habe ein div,
und ich habe beschlossen, dass es absolut ist, und es sollte eine 100 von oben sein, und
vielleicht eine 100 über.
Also geht es genau hier.
In Ordnung, nun, wenn wir relativ machen würden,
würde das nächste Element darunter gehen.
Aber wenn wir zwei absolute Werte haben, wird der nächste, der auftaucht
, wieder ganz oben drauf gehen.
In Ordnung, die letzte Position, über die ich reden werde, heißt „fixiert“.
Und die feste Position ist relativ zum Browserfenster.
So sind sie in der Lage, diese Seiten zu erstellen, auf
denen man manchmal das Pop-up bekommt, und man kann es einfach nicht weggehen.
Sie scrollen und scrollen weiter, und es folgt Ihnen.
Nun, wie sie das gemacht haben, ist, dass sie diese feste Position benutzt haben.
Dieses Element wird sich nicht bewegen, selbst wenn das Fenster gescrollt wird.
Nur damit Sie wissen, ob Sie einen älteren Browser verwenden oder versuchen,
für Internet Explorer 7 oder 8 zu entwerfen, funktioniert dies nur, wenn Sie einen HTML5-DOCTYPE verwenden.
Also wieder, wenn Sie an die feste Position denken, denken Sie an Pop-up-Boxen
, die einfach nicht weggehen.
Oder Sie möchten es auch als etwas nützlicheres betrachten, das ist, wenn Sie
auf einer Seite sind, und Sie haben möglicherweise die Navigationsleiste, die oben ist, und wenn
Sie durch die Seite blättern, müssen Sie nicht zurück nach oben scrollen, um
die Navigationsleiste zu sehen, denn es ist immer genau da.
Lassen Sie uns also voran gehen und sehen Sie sich ein Beispiel an, in dem ich einige
verschiedene Elemente habe, die die verschiedenen Positionseigenschaften verwenden.
Okay, ich zeige Ihnen eine Seite, auf der ich hineingegangen bin, und
ich habe ein paar Elemente gesetzt.
Nur zwei divs und ein paar Absätze.
Und nur um zu beginnen, gab ich ihnen etwas Starter-Styling, nur damit
wir zwischen ihnen unterscheiden können.
Für unser div positioniere ich relativ, ich gab ihm eine Höhe, eine Breite und einen Rahmen.
Für die Absätze gab ich ihm einen Rahmen einer anderen Farbe,
gab ihm einen oberen und linken Rand, und ich ließ ihn als Position statisch,
weil das die Standardposition ist, die es immer sein würde.
Ich will dir zeigen, wie das im Browser aussehen wird.
Wenn Sie also schauen, können Sie sehen, dass ich zwei Divs habe, eins hier oben und unten, und
ich habe meine drei Absätze.
Eins, whoops, tut mir leid.
Eins, zwei, drei.
Das erste, was ich darauf hinweisen möchte, ist, dass dies nicht genau so aussieht, wie einige von
Ihnen erwarten, dass es aussieht, oder sogar genau die gleiche Weise, wie einige von Ihnen es sehen könnten, wenn
Sie es in Ihrem Browser laden.
Anstatt diesen Absatz ganz oben zu setzen,
wird er tatsächlich ein wenig nach unten geschoben.
Dasselbe gilt für B und C.
Der Grund, der passiert, ist, dass alle Browser unterschiedliche Standardwerte für den Ort haben,
an dem der Absatz positioniert werden soll.
Also, lassen Sie mich für eine Sekunde hier rüber scrollen.
Ich gehe runter.
Und Sie können sehen, dass es diesen seltsamen Code hier gibt, der besagt,
-webkit- margin-before und -webkit-margin-after.
Dies ist ein Beispiel für einige Pseudoklassen, die sie verwendet haben.
Also möchte ich nicht, dass diese verschiedenen Standarddinge ins Spiel kommen.
Also werde ich voran gehen und sie loswerden.
Nachdem ich diese auskommentiert und das wieder kommentiert habe, aktualisiere ich, und
jetzt haben wir unsere A, B und C.
Also wieder, A, B und C, sind alle relativ.
Sie sagen es dem Browser, legen Sie es einfach in den nächsten verfügbaren Speicherplatz.
Also lassen Sie uns sehen, was jetzt passieren wird, wenn ich mein Element
von relativ zu statisch oder sorry von statisch zu relativ ändere.
Und Sie können sehen, dass sie umgezogen sind, und
der Grund, warum sie umgezogen sind, ist, dass ich ihm die Werte von Top 100 gegeben habe und 100 verlassen habe.
Geh runter, schieb weiter.
Wenn ich das auf 50 ändere.
Hoppla, 59, das wird funktionieren.
Sie können sehen, bewegt sich nicht ganz so viel.
Also, statisch gehen Sie einfach an erster Stelle, an der Sie können.
Relativ, gehen Sie an erster Stelle, die Sie können, aber gehen
Sie voran, Sie können es sagen, wenn Sie möchten, dass es ein wenig in beide Richtungen bewegt.
Die nächste, die wir tun werden, ist absolut.
Vielleicht.
Da gehen wir, also möchte ich, dass du jetzt etwas bemerkst.
Das A und das B, sie sind übereinander.
Weil Sie sagten, ich möchte, dass Sie 100 Pixel nach unten und
59 Pixel von der Seite des Containerelements entfernt sind.
In diesem Fall ist es dieses div.
Das ist seltsam, denn sie sind übereinander, und es ist alles miteinander vermischt.
Es gibt Umstände, in denen Sie wollen, dass die Dinge übereinander stehen.
Vielleicht wird einer von ihnen sichtbar sein, und
einer von ihnen wird versteckt sein, und sie werden sich dynamisch ändern.
Aber das ist, was passiert mit absoluten.
Wenn ich scrolle, werde ich diesen Bildschirm etwas kleiner machen, und ich scrolle,
können Sie sehen, dass die A und die B, sie scrollen weg.
Und natürlich habe ich dieses Beispiel gemacht, weil ich Ihnen zeigen wollte, dass, wenn ich
dies jetzt auf fix umgestellt habe, anstatt das Element relativ
zu seinem Elternteil zu sagen, Position dieses Element relativ zum gesamten Browser zu sagen.
Also, jetzt ist alles übereinander, und wenn ich versuche, weg zu scrollen.
Es funktioniert nicht.
Es bleibt genau da, okay?
Also wieder, es ist statisch, relativ, absolut und fixiert.
Und ich möchte, dass du damit spielst und deine Optionen kennst,
bevor du anfängst, deinen Code von Hand auszulegen.
Nun, eines der Dinge, die ich Ihnen gezeigt habe, ist, dass es möglich ist, dass
mehrere Elemente an der gleichen Position oder übereinander platziert werden.
Und es gibt eine Möglichkeit, damit umzugehen, wenn Ihnen die Bestellung nicht gefällt, dass sie
auftauchen.
Und das nennt man den Z-Index.
Der Z-Index ist nur im Grunde nur ein Zahlenwert, er ist entweder positiv oder
negativ, der dem Browser Ihre Stapelreihenfolge mitteilt.
Wenn du also etwas hast und wirklich sicher bist, dass du
sichergehen willst, dass es immer an der Spitze ist, würdest du etwas wie 100 drauf setzen.
Wenn es dir nicht wirklich egal wäre, würdest du ihm einen negativen 100 geben.
Und das ist die Art und Weise, wie die Leute weitergehen und
die Elemente später etwas dynamischer positionieren können,
wenn wir ein bisschen JavaScript oder andere Dinge wie das hinzufügen.
Der Z-Index ist also etwas, mit dem nicht viele Leute codieren, aber
es ist wirklich hilfreich, wenn Sie inspect-Element verwenden,
wenn unten etwas ist, und Sie wollen sehen, wie es oben aussieht.
Also lassen Sie uns voran gehen und überprüfen. Das
Positionieren des Elements ist der Schlüssel zum Erstellen der Layouts, die Sie
haben möchten.
Und das ist besonders wichtig, wenn Sie sich Sorgen machen, dass Ihre Website auf
einem kleinen Bildschirm, einem großen Bildschirm, etc. gut aussieht.
So richtige Planung wird dies viel einfacher für
Sie machen, wenn es Zeit ist, Ihre Seite zu codieren.
Aber wirklich, das Wichtigste, was Sie jetzt tun können, ist online zu gehen, finden Sie diese
Tutorials oder verschiedene Referenzen, wo sie über Positionierung sprechen, und spielen
Sie damit, bis Sie sich ein wenig wohler fühlen, wie jeder dieser Arbeiten funktioniert.
Viel Glück.