Mit welcher CSS-Eigenschaft wird die absolute Positionierung eines Elements festgelegt?

Das CSS-Attribut, das zum Festlegen der absoluten Positionierung eines Elements verwendet wird, ist „position“. Sie müssen nur den Wert des Positionsattributs auf „absolute“ setzen. Die Syntax lautet „element {position:absolute;}“; Die absolute Positionierung wird aus dem Dokument entfernt. Der Stream wird vollständig entfernt und relativ zu seinem enthaltenden Block positioniert.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Die CSS-Eigenschaft, mit der die absolute Positionierung eines Elements festgelegt wird, ist „positon“.

Das Positionsattribut gibt den Positionierungstyp des Elements an. Sie müssen nur den Wert des Positionsattributs auf „absolut“ setzen, um eine absolute Positionierung zu erreichen.

Ein Element, das auf absolute Positionierung eingestellt ist, wird vollständig aus dem Dokumentfluss entfernt und relativ zu seinem enthaltenden Block positioniert, der ein anderes Element im Dokument oder der anfängliche enthaltende Block sein kann. Der zuvor vom Element im normalen Dokumentenfluss belegte Platz wird geschlossen, als ob das Element nicht vorhanden wäre. Das Element generiert nach der Positionierung eine Box auf Blockebene, unabhängig davon, welche Art von Box es ursprünglich im normalen Ablauf generiert hat.

Grundlegende Merkmale der absoluten Positionierung

Das erste Merkmal der absoluten Positionierung ist, dass sie vom Dokumentenfluss getrennt wird und nicht durch andere Elemente beeinflusst wird. Die Positionierung ist also „absolut“. es wird als absolute Positionierung bezeichnet. Wenn es sich um eine relative Positionierung handelt, wird sie von anderen Elementen beeinflusst, dann ist die Positionierung „relativ“

Es wird keine Positionierung verwendet: Das heißt, das Element befindet sich im normalen Dokumentfluss

        <div class="frame">
            <div id="div1"></div>
            <div id="div2"></div>
        </div>

.frame {
	margin: 0 auto;
	margin-top: 50px;
	width: 400px;
	height: 300px;
	background-color: yellow;
}
#div1 {
	width: 100px;
	height: 50px;
	background-color: blue;
}
#div2 {
	width: 200px;
	height: 100px;
	background-color: green;
}

Wenn wir das Element absolut positionieren, löst es sich aus dem aktuellen Dokumentfluss.

#div1 {
	position: absolute;
}

Das heißt, das absolut positionierte Element hat keine Position im Dokument Es bricht aus dem Dokumentenfluss ab und nachfolgende Elemente nehmen ihre ursprüngliche Position ein.

Das zweite Merkmal der absoluten Positionierung ist, dass die Positionierungsposition relativ zum ersten Vorgängerelement ist (d. h. Die Position ist relativ oder absolut); Da in diesem Beispiel keines seiner Vorgängerelemente über ein Positionierungsattribut verfügt, wird es relativ zum Körper positioniert Das absolut positionierte Element erfolgt relativ zum übergeordneten Element auto (oder nicht eingestellt, die Standardeinstellung ist auto), das absolut positionierte Element skaliert seine Größe automatisch entsprechend seiner linken und rechten Seite (

);

#div1 {
	top: 30px;
}

Basierend auf der ersten erweiterten Funktion können wir die zweite erweiterte Funktion ableiten. Da absolute Verhaltenselemente die Funktion der automatischen Skalierung haben, wenn der Breitenwert automatisch ist und wir beide links festlegen und rechts auf 0, das Element wird mit seinem relativen Element aufgefüllt. Wenn wir zu diesem Zeitpunkt die Breite auf einen festen Wert festlegen, wird dies der Fall sein. Absolut positionierte Elemente geben dem linken Wert als Positionierungsmarkierung Vorrang (Dieser Standard gilt für Dokumentenflüsse, die von links nach rechts gelesen werden, und bei einer kleinen Anzahl von Dokumentenflüssen, die von rechts nach links gelesen werden, erhält rechts Vorrang

.frame {
	position: relative;
	/* 或者 position: absolute; */
}

#div1 {
	top: 0;
	bottom: 0;
}