CSS Position (Position)

Das CSS-Positionselement wird verwendet, um zu bestimmen, wie ein Element auf der Seite positioniert wird. Die Positionierungsarten von CSS Position (Position) sind: statische Position (static), absolute Position (absolute), relative Position (relative), feste Position (fixed).

CSS-Positionierungsmethode

Die genaue Positionierung von Elementen auf einer Webseite ist für eine gute Layoutgestaltung notwendig. In CSS gibt es mehrere Methoden zur Positionierung von Elementen. Im nächsten Abschnitt werden diese Positionierungsmethoden nacheinander vorgestellt.

Statische Position (static)

Positionieren Sie statische Positionselemente immer gemäß dem normalen Fluss der Seite. HTML-Elemente sind im Standardfall in einer statischen Position. Statische Positionselemente beeinflussen nichttop,bottom,left,right, undz-indexEigenschaft.

Wenn der Positionswert eines Elements nicht angegeben ist, also im Standardfall, ist das Element statisch positioniert. Alle HTML-Objekte, die das Positionselement unterstützen, sind standardmäßig auf "static" eingestellt. "static" ist der Standardwert des Positionselements und bedeutet, dass der Block in der ursprünglichen Position bleibt und nicht neu positioniert wird.
Im Grunde genommen benötigen wir "position:static" im Alltag nicht unbedingt, aber manchmal verwenden wir JavaScript, um die Positionselemente zu steuern, und wenn wir möchten, dass andere Positionselemente statisch positioniert werden, müssen wir "position:static;" verwenden, um dies zu erreichen.

.box　{
　　　　ausfüllen:　20px;
　　　　background: #7dc765;
}

Relative Positionierung (relative)

Relative positionierte Elemente werden相对于其正常位置定位。

In einem relativen Positionierungsplan wird die Position der Box des Elements basierend auf dem normalen Fluss berechnet. Danach werden die Attribute basierend auf- top oder bottom und/oder left, um die Box von dieser normalen Position abzuwählenright.

.box　{
　　　　position: fest;
　　　　left:　100px;
}

Absolute Positionierung (absolute)

Elemente mit absoluter Positionierung werden相对于具有非静态位置的第一个父元素定位。Wenn solches Element nicht gefunden wird, wird es相对于浏览器窗口的“左上角”定位在页面上。可以使用top，right，bottom和left weitere mögliche Attribute, um den Versatz der Box zu bestimmen.

Elemente mit absoluter Positionierung werden vollständig aus dem normalen Fluss herausgenommen und nehmen daher keinen Raum für gleichrangige Elemente ein. Aber abhängig vonz-indexWert, das mit anderen Elementen überlappen kann. Darüber hinaus können Elemente mit absoluter Positionierungmarginund sie falten sich nicht mit anderen Margin zusammen.

.box　{
　　　　position: fest;
　　　　top:　200px;
　　　　left:　100px;
}

Fixierte Positionierung (fixed)

Fixierte Positionierung ist eine Unterklasse der absoluten Positionierung.

Der einzige Unterschied ist, dass fix positionierte Elemente相对于浏览器的视口是固定的，并且在滚动时不会移动。

.box　{
　　　　position: fest;
　　　　top:　200px;
　　　　left:　100px;
}