Ausführliche Erklärung der Position in CSS (Codebeispiel)

Der Inhalt dieses Artikels ist eine detaillierte Erklärung (Codebeispiel) zur Position in CSS. Freunde in Not können darauf verweisen.

Die CSS-Positionseigenschaft ist vielseitig und leistungsstark. Es ermöglicht das Festlegen oder Ändern der Position eines Elements. Es gibt 4 mögliche Werte: statisch (Standardwert), relativ, absolut, fest. (Empfohlener Kurs: CSS-Video-Tutorial)

Es wird normalerweise mit 4 Koordinatenattributen verwendet: links, rechts, oben, unten

statisch

Dies ist der Standardpositionswert: Statische Elemente folgen einfach dem natürlichen Fluss. Sie werden von den linken, rechten, oberen oder unteren Werten nicht beeinflusst.

relativ

Wenn die Position auf „relativ“ eingestellt ist, kann sich das Element basierend auf seiner aktuellen Position bewegen.

<p>汉皇重色思倾国，御宇多年求不得。杨家有女初长成，养在深闺人未识。天生丽质难自弃，一朝选在君王侧。回眸一笑百媚生，六宫粉黛无颜色。春寒赐浴华清池，温泉水滑洗凝脂。侍儿扶起娇无力，始是新承恩泽时。</p>
<p>云鬓花颜金步摇，芙蓉帐暖度春宵。春宵苦短日高起，从此君王不早朝。承欢侍宴无闲暇，春从春游夜专夜。后宫佳丽三千人，三千宠爱在一身。金屋妆成娇侍夜，玉楼宴罢醉和春。</p>
<p>姊妹弟兄皆列土，可怜光彩生门户。遂令天下父母心，不重生男重生女。骊宫高处入青云，仙乐风飘处处闻。缓歌慢舞凝丝竹，尽日君王看不足。渔阳鼙鼓动地来，惊破霓裳羽衣曲。</p>

p{ border: 1px solid blue;}

Der Effekt ist wie folgt:

Lassen Sie uns weiter schauen:

<p>九重城阙烟尘生，千乘万骑西南行。翠华摇摇行复止，西出都门百余里。六军不发无奈何，宛转蛾眉马前死。花钿委地无人收，翠翘金雀玉搔头。君王掩面救不得，回看血泪相和流。黄埃散漫风萧索，云栈萦纡登剑阁。</p>
<p class="second">峨嵋山下少人行，旌旗无光日色薄。蜀江水碧蜀山青，圣主朝朝暮暮情。行宫见月伤心色，夜雨闻铃肠断声。天旋地转回龙驭，到此踌躇不能去。马嵬坡下泥土中，不见玉颜空死处。</p>
<p>君臣相顾尽沾衣，东望都门信马归。归来池苑皆依旧，太液芙蓉未央柳。芙蓉如面柳如眉，对此如何不泪垂。春风桃李花开日，秋雨梧桐叶落时。</p>

p{ border: 1px solid blue;}
.second{ position: relative;border:1px solid red; left: 20px; top: 10px;}

Der Effekt ist wie folgt:

Der rote Rand wird um 20 Pixel von links und 10 Pixel von oben verschoben, relativ zu seiner natürlichen Position, wo er sein sollte.

Beachten Sie, dass sich der blaue Absatz überhaupt nicht verschoben hat. Durch die relative Positionierung kann der rote Absatz frei verschoben werden, ohne dass das Layout beschädigt wird. Das Einzige, was unangemessen ist, ist, dass alle anderen Elemente außer sich selbst nicht wissen, dass das Element verschoben wurde.

absolut

Wenn die Position auf „absolut“ eingestellt ist, können Elemente basierend auf dem ersten positionierten Element verschoben werden.

"Positionierung? Was ist ein positioniertes Element?"

Ein positioniertes Element ist eine Position, deren Wert relativ, absolut oder fest ist. Daher wird ein Element positioniert, es sei denn, die Position ist nicht festgelegt oder statisch.

Das Merkmal eines positionierten Elements besteht darin, dass es als Referenzpunkt für seine untergeordneten Elemente dient.

Stellen wir uns eine einfache Hierarchie vor:

<section>
  I&#39;m in position relative.
  <p>
    I&#39;m in position absolute!
  </p>
</section>

section {
  background: gold;
  height: 200px;
  padding: 10px;
  position: relative; /* This turns the <section> into a point of reference for the <p> */
}
p {
  background: limegreen;
  color: white;
  padding: 10px;
  position: absolute; /* This makes the <p> freely movable */
  bottom: 10px; /* 10px from the bottom */
  left: 20px; /* 20px from the left */
}

Der Effekt ist wie folgt:

Der gelbe Teil hat eine Höhe von 200 Pixel und seine Die festgelegte Position ist relativ und wandelt sie in den Referenzpunkt für alle untergeordneten Elemente um.

Wenn die Position des grünen Absatzes auf absolut eingestellt ist, kann er sich entsprechend dem gelben Teil frei bewegen. Durch Festlegen der unteren und linken Werte wird es in die untere linke Ecke verschoben.

Was passiert, wenn wir links und rechts setzen?

Wenn die Breite nicht festgelegt ist, wird das Element durch Anwenden von links: 0 und rechts: 0 über die gesamte Breite gestreckt. Dies entspricht der Einstellung links: 0 und Breite: 100 %.

Wenn die Breite festgelegt ist, verwirft rechts den Wert.

fest

Wenn die Position auf „fest“ eingestellt ist, funktioniert es wie eine absolute Positionierung: Sie können die Koordinaten links/rechts und oben/unten festlegen.

Der einzige Unterschied besteht darin, dass der Referenzpunkt das Ansichtsfenster ist. Das bedeutet, dass das feste Element nicht mit der Seite scrollt; es ist auf dem Bildschirm fixiert.

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung der Position in CSS (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!