Ich war auf der Suche irgend Beispiel CSS/HTML und fanden diese:Was ist der Effekt, wenn man alles relativiert?
*, *:before, *:after {
position: relative;
}
Es scheint, dass diese Regel deutlich das Layout ändern.
Was ist der Grund für diese Regel?
Was es wirklich bedeutet, ist „relativ zu sich selbst“. Wenn Sie Position festlegen: relativ; auf einem Element, aber keine anderen Positionierungsattribute (oben, links, unten oder rechts), wird es überhaupt keine Auswirkung auf seine Positionierung haben, es wird genau so sein, wie es wäre, wenn Sie es als Position verlassen würden: statisch; Aber wenn Sie es geben ein anderes Positionierungsattribut, sagen wir, top: 10px ;, wird es seine Position 10 Pixel nach unten verschieben von wo es normalerweise wäre. Ich bin sicher, Sie können sich vorstellen, dass die Fähigkeit, ein Element basierend auf seiner normalen Position zu verschieben, ziemlich nützlich ist. Ich benutze dies, um Formelemente viele Male auszurichten, die eine Tendenz haben, nicht so auszurichten, wie ich es möchte.
Es gibt zwei andere Dinge, die passieren, wenn Sie die Position festlegen: relativ; auf ein Element, das Sie beachten sollten. Zum einen wird die Möglichkeit eingeführt, den Z-Index für dieses Element zu verwenden, der nicht wirklich mit statisch positionierten Elementen funktioniert. Auch wenn Sie keinen Z-Index-Wert festlegen, wird dieses Element jetzt über jedem anderen statisch positionierten Element angezeigt. Sie können es nicht bekämpfen, indem Sie einen höheren Z-Index-Wert für ein statisch positioniertes Element festlegen. Die andere Sache, die passiert, ist, dass es den Umfang von absolut positionierten Kindelementen einschränkt. Jedes Element, das ein Kind des relativ positionierten Elements ist, kann absolut innerhalb dieses Blocks positioniert werden.
Sie können jede Elementposition (oben, links, rechts, unten) von der aktuellen Position aus angeben, die Sie benötigen. Probe Ich brauche Ulme für 10px oben geht:
elm.myclass {position: relative; top: -10px;}
Für eine bessere Position Spezifikation Verwendung display:flex;
Grundsätzlich nichts, solange keine Positionierungswerte verwendet werden. Es hat die Wirkung, (ich glaube) eine Z-Index-Berechnung zu erzwingen, aber im Allgemeinen ist es sinnlos. –
Welchen Effekt erwarten Sie, wenn Sie alles relativieren? wie diese Dinge, um es zu wissen ... – vignesh
Das wird viele Effekte haben (wahrscheinlich mehr als vernünftig in einer Stackoverflow Antwort gehen) und ich kann mir nicht vorstellen, was ich als "gut" betrachten würde. Ich kann dir nicht sagen, was die Person, die das geschrieben hat, gedacht hat, aber sie hat wahrscheinlich nicht genug über CSS nachgedacht *). – Quentin