Wie gelten die Margenregeln für Elemente, die nicht im DOM-Ablauf enthalten sind?
Also habe ich diese Frage gestellt: Google Chrome Problem mit behoben Position und Margin-Top , die mir schließlich klar gemacht haben, dass top und margin-top nicht dasselbe sind. Ich weiß nicht, wie ich das all die Jahre vermisst habe.
Wie auch immer, ich habe gedacht, was genau der Unterschied zwischen margin-top und top ist. So habe ich diese Frage gefunden: CSS: Top vs Rand oben .
Ich wusste bereits, was margin-top getan hat. Aber ich hatte das nie extrapoliert, um zu denken: "Hmm, dieses Element ist nicht im DOM-Fluss, also was genau macht margin-top davon weg?"
Aus der Frage, die ich gestellt habe, weiß ich, dass sich margin-top auf sehr unerwartete Weise verhält, wenn es auf ein Element mit einer fixed -Position angewendet wird. Und das kann zumindest in Chrome zu einigen verrückten Regeln führen (wie margin-top: -273%; ).
Meine Frage ist also: Wie tun Browser margin -Regeln auf Elemente anwenden, die nicht im DOM-Fluss sind (zB Elemente mit einem position -Wert von fixed oder absolute . Und was? über die Art und Weise, wie sie angewendet und gerendert werden, führt zu Regeln, wie die oben beschriebene, tatsächlich das Element in den View-Port rendern?
1 Antwort
Die top -Eigenschaft bestimmt einfach, wie weit vom übergeordneten Element das Box-Modell gerendert werden soll. Im Falle von position: fixed ist das das Fenster selbst. Im Fall von position: absolute ist dies das nächste übergeordnete Element mit einer nicht statischen Position.
Margin hingegen ist Teil des Box-Modells. Durch das Hinzufügen von Rand zum oberen Rand der Box wird der freie Platz oberhalb der Box vergrößert.
Betrachten Sie die folgenden Ebenen für eine position: fixed Box:
Der gesamte Rand, Rahmen und Abstand ist Teil des Boxmodells. Das gesamte Element oder "Stück" ist nur ein großes Quadrat beim Positionieren. Also, wenn Sie einen Rand von 10px auf der Oberseite der Box haben, und positionieren Sie das Element 10px von oben, wird es aussehen, 20px Rand zwischen dem oberen Rand des Fensters und wo die sichtbare Box beginnt. p>
Ich habe auch ein sehr einfaches Beispiel in jsFiddle gemacht.
Wenn Sie Grafiken mögen, nehmen Sie dieses Beispiel, wo die rote Box ein position: fixed :
Wie Sie im ersten Abschnitt sehen können, verschiebt die Einstellung only , die position: fixed auf das Element setzt, diese Position nicht wirklich. Es entfernt es nur aus dem Fluss des Dokuments.
Im Abschnitt Abschnitt fügt das Hinzufügen von margin-top: 10px das Element nach unten 10px, weil die Box jetzt 10px Rand oben hat. Allerdings hat es sich nirgends wirklich bewegt . Die Box wurde gerade größer, weil sich das Box-Modell geändert hat.
Im dritten Abschnitt verschiebt die Verwendung von top: 10px die Box um 10 Pixel vom oberen Rand des Fenstercontainers. Es hat genau das gleiche Boxmodell wie im ersten Abschnitt.
Abschnitt vier ist wie der zweite Abschnitt darüber, außer dass der negative Rand bewirkt, dass er sich um zehn Pixel nach oben bewegt. Das Boxmodell ist immer noch größer und die Box hat sich immer noch nicht bewegt.
Wenn Sie eine absolute Position für ein Element festlegen, wird das Element überhaupt nicht verschoben, wenn Sie keine anderen Positionseigenschaften festlegen . Ohne eine top , right , bottom oder left Eigenschaft bleibt das Element in der Position, in der es gewesen wäre, wenn es als Teil des Flusses gerendert worden wäre der Fluss. Wenn also ein positiver oder negativer Rand hinzugefügt wird, scheint er sich von dieser Position aus nach oben oder unten zu bewegen. In Wirklichkeit ändern Sie nur das Box-Modell des Elements.
Sie müssen auch feststellen, dass margin-top: 10% wird dieser Wert auf 10% der verfügbaren Breite und nicht auf die verfügbare Höhe gesetzt, und wenn er negativ wird, wird dieser Wert einfach negiert. Ich habe das erwähnt, weil es für die erste Frage relevant ist, die Sie mit der Prozentangabe für margin-top verknüpft haben.
Ich hoffe, dass dies alles abgedeckt hat, wonach Sie gesucht haben. Ich konnte nicht sagen, was genau du warst verwirrt, also habe ich einfach so viel wie möglich erklärt.