Die Positionseigenschaft in CSS wird verwendet, um die Position eines Elements auf der Seite festzulegen. Mit dieser Eigenschaft können Sie jedes Attribut dort platzieren, wo Sie es für angemessen halten.
Das Positionsattribut gibt den Positionierungstyp des Elements an. Dieses Attribut definiert den Positionierungsmechanismus, der zum Festlegen des Layouts des Elements verwendet wird. Jedes Element kann positioniert werden, aber absolute oder feste Elemente erzeugen eine Box auf Blockebene, unabhängig vom Typ des Elements selbst. Ein relativ positioniertes Element wird im normalen Fluss von seiner Standardposition versetzt.
Das Positionsattribut gibt die Art der Positionierungsmethode an, die auf das Element angewendet wird (statisch, relativ, fest, absolut oder klebrig):
Elemente werden tatsächlich mithilfe der Attribute „oben“, „unten“, „links“ und „rechts“ positioniert . Diese Eigenschaften haben jedoch keine Auswirkung, es sei denn, die Positionseigenschaft wird zuerst festgelegt. Sie funktionieren je nach Positionswert unterschiedlich.
1. Statische Positionierung: statisch
HTML-Elemente werden standardmäßig statisch positioniert.
Statisch positionierte Elemente werden von den Attributen oben, unten, links und rechts nicht beeinflusst.
Ein Element mit position: static; wird nicht auf eine spezielle Weise positioniert; es wird immer entsprechend dem normalen Seitenfluss positioniert:
Beispiel:
<!DOCTYPEhtml><html><head><style>div{height:100px;border:1pxsolidblack;}div.static{width:130px;height:50px;background-color:#CCC;line-height:50px;text -align:center;position:static;top:50px;left:20px;}</style></head><body><div><divclass=static>item;</div></div></body ></html>Laufergebnisse:
2. Relative Positionierung: relativ
Beispiel:
<html><head><styletype=text/css>#item1{width:100px;height:100px;background-color:green;}#item2{width:100px;height:100px;background-color:red;}< /style></head><body><divid=content><divid=item1>item1</div><divid=item2>item2</div></div></body></html>Laufergebnisse:
Wenn Sie die CSS-Stildatei im Code wie folgt ändern:
<html><head><styletype=text/css>#item1{width:100px;height:100px;background-color:green;}#item2{width:100px;height:100px;background-color:red;position: relative;left:20px;top:20px;}</style></head><body><divid=content><divid=item1>item1</div><divid=item2>item2</div></div ></body></html>Laufergebnisse:
Zusammenfassung: Relativ ist ein Versatz relativ zur Position des normalen Dokumentenflusses. Die ursprünglich eingenommene Position ist weiterhin vorhanden, was bedeutet, dass sie die Position nachfolgender Elemente nicht beeinflusst. „Links“ bedeutet einen Versatz relativ zur rechten Seite der ursprünglichen Position und „oben“ bedeutet einen Versatz relativ zur Unterseite der ursprünglichen Position. Wenn links und rechts gleichzeitig vorhanden sind, ist nur links gültig. Wenn oben und unten gleichzeitig vorhanden sind, ist nur oben gültig. Der relative Versatz basiert auf der oberen linken Seite des Objektrands.
3. Absolute Positionierung: absolut
Beispiel:
<html><head><styletype=text/css>#item1{width:100px;height:100px;background-color:green;}#item2{width:100px;height:100px;background-color:red;}# content{margin-left:100px;margin-top:100px;}</style></head><body><divid=content><divid=item1>item1</div><divid=item2>item2</div ></div></body></html>Laufergebnisse:
Beim Ändern von CSS-Stildateien:
<html><head><styletype=text/css>#item1{width:100px;height:100px;background-color:green;}#item2{width:100px;height:100px;background-color:red;position: absolute;left:20px;top:20px;}#content{margin-left:100px;margin-top:100px;}</style></head><body><divid=content><divid=item1>item1< /div><divid=item2>item2</div></div></body></html>Laufergebnisse:
Es ist ersichtlich, dass die absolute Positionierung relativ zum Browserfenster erfolgt, wenn der Positionsattributwert des übergeordneten Elements der Standardwert (statisch) ist.
Wenn der Wert des Positionsattributs von content auf einen nicht standardmäßigen Wert festgelegt ist, wird „absolute“ relativ zum übergeordneten Element positioniert:
<html><head><styletype=text/css>#item1{width:100px;height:100px;background-color:green;}#item2{width:100px;height:100px;background-color:red;position: absolute;left:20px;top:20px;}#content{margin-left:100px;margin-top:100px;position:relative}</style></head><body><divid=content><divid=item1 >item1</div><divid=item2>item2</div></div></body></html>Laufergebnisse:
Ändern Sie den CSS-Stil weiter:
<html><head><styletype=text/css>#item1{width:100px;height:100px;background-color:green;}#item2{width:100px;height:100px;background-color:red;}# content{margin-left:100px;margin-top:100px;position:absolute;padding:20px;border:10pxsolidblack;}</style></head><body><divid=content><divid=item1>item1< /div><divid=item2>item2</div></div></body></html>Laufergebnisse:
Haben Sie die Änderung bemerkt? Wenn das äußere Div auf „absolut“ eingestellt ist, ändert sich die Breite des äußeren Div von 100 % auf „Auto“.
Wenn Sie die Positionseigenschaft eines Elements auf „absolut“ oder „fest“ setzen, passieren drei Dinge:
(1) Verschieben Sie das Element um eine Ebene in Richtung der Z-Achse. Das Element befindet sich außerhalb des normalen Flusses, sodass es nicht mehr den Platz der ursprünglichen Ebene einnimmt und die Elemente der unteren Ebene bedeckt.
(2) Das Element wird zu einem Element auf Blockebene, was dem Festlegen von display: block; für das Element entspricht (geben Sie ein Inline-Element an, z. B. <span>, und nachdem Sie „absolut“ festgelegt haben, werden Sie feststellen, dass es festgelegt werden kann Breite und Höhe).
(3) Wenn es sich bei dem Element um ein Element auf Blockebene handelt, ändert sich die Breite des Elements von der ursprünglichen Breite: 100 % (belegt eine Zeile) auf automatisch.
4. Feste Positionierung: fest
Bei der festen Positionierung wird das Element relativ zum Browserfenster positioniert, da es sich beim Scrollen des Browserfensters nicht bewegt, als ob es auf der Seite fixiert wäre Dies wird durch eine feste Positionierung erreicht.
Beispiel:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title></title><style>.out{border:red1pxsolid;height:600px;width:500px;}.in{border:blue1pxsolid; height:200px;width:200px;}</style></head><body><divclass=outstyle=position:relative;><divclass=instyle=background-color:wheat;></div><divclass=instyle =Hintergrundfarbe:rot;Position:fest;links:20px;unten:10px;></div><divclass=instyle=Hintergrundfarbe:blau;></div></div></body></ html>Laufergebnisse:
5. Klebrige Positionierung: klebrig
Die Sticky-Positionierung unterscheidet sich von den vier zuvor eingeführten Positionierungsmethoden. Sie ähnelt einer Kombination aus relativer Positionierung und fester Positionierung. Wenn die Seite gescrollt wird, ist sie dieselbe wird wieder angezeigt. Der Positionierungseffekt wurde behoben. Beispielsweise befindet sich das Navigationsmenü auf einigen Webseiten beim Laden der Seite in seiner Standardposition und ist beim Scrollen nach unten am oberen Rand der Seite fixiert.
Beispiel:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title></title><style>.out{border:red1pxsolid;height:600px;width:500px;}.in{border:blue1pxsolid; height:200px;width:250px;}</style></head><body><divclass=out><divclass=instyle=background-color:wheat;></div><divclass=instyle=background-color: red;></div><divclass=instyle=background-color:blue;></div></div></body></html>Laufergebnisse:
