Die beiden Möglichkeiten zur Größe von absoluten Elementen in CSS

Jeder, der eine Weile CSS benutzt hat, wird die Vorzüge der absoluten und relativen Positionierung kennen. Zusammenfassung: Position: Relativ kann ein Element entweder horizontal (mit links oder rechts) oder vertikal (unter Verwendung von oben oder unten) aus seiner ursprünglichen Position verschoben werden. Position: Absolut ermöglicht es, ein Element in Bezug auf einen Block mit links, rechts, oben oder unten in einem Block zu positionieren (Der enthaltene Block ist der nächste Vorfahren mit einer Position von Relativ, absolut oder fest). Die Positionierungsknoten sind daher einfach, z. HTML:

<div >
	<div ></div>
</div>

CSS:

#outer
{
	position: relative;
	width: 200px;
	height: 200px;
	margin: 20px auto;
	border: 2px solid #c00;
}

#inner
{
	position: absolute;
	left: 50px;
	top: 50px;
	width: 96px;
	height: 96px;
	background-color: #ddc;
	border: 2px solid #00c;
}

(Die tatsächliche Breite und Höhe des inneren Blocks ist aufgrund der Zugabe des Randes 100px). Die folgenden Boxen werden in jedem modernen Browser (einschließlich IE6) gerendert:   Weniger bekannt ist, dass Sie alle linken, rechts, oben und unten anwenden können Eigenschaften gleichzeitig. Das folgende CSS macht das innere Element identisch:

#inner
{
	position: absolute;
	left: 50px;
	right: 50px;
	top: 50px;
	bottom: 50px;
	background-color: #ddc;
	border: 2px solid #00c;
}

Die Breite und Höhe des Innenkasten bleibt 100px, aber wir müssen die Abmessungen nicht explizit einstellen. Dies könnte nützlich sein, wenn:

• Der Abstand um das Element ist kritischer als die Breite oder Höhe. Sie können auch negative Eigenschaften von links, rechts, oben und/oder unteren Boden verwenden, um das Innenfeld größer als das äußere Elternteil zu gestalten.
• Sie haben mehrere innere Elemente mit unterschiedlichen Grenzen und Polster, benötigen jedoch einen konstanten Außenabstand. Mit dieser Methode können Sie einen einzelnen Stil für all diese Elemente erstellen.

JavaScript -Animationen können ebenfalls davon profitieren, da es einfacher und schneller sein kann, ein Element zu ändern, wenn Sie die resultierende Breite und Höhe nicht berechnen müssen, z.

// expands and contracts the inner box
window.onload = function() {

	var inner = document.getElementById("inner");
	var offset = 100, dir = -1;
	setInterval(function() {
		inner.style.left = inner.style.right = inner.style.top = inner.style.bottom = offset+"px";
		offset += dir;
		if (offset == 0 || offset == 100) dir = -dir;
	}, 10);
	
}

Ein Hinweis zur Browserkompatibilität: Diese Technik funktioniert in allen Hauptbrowsern, außer IE6, das nur explizite Breiten und Höhen versteht. Es gibt eine Überraschung!

häufig gestellte Fragen (FAQs) zu CSS -Größen und absolute Positionierung

Was ist der Unterschied zwischen der absoluten und der relativen Positionierung in CSS? Durch die absolute Positionierung kann ein Element relativ zum nächsten positionierten Vorfahren positioniert werden. Dies bedeutet, dass das Element aus dem normalen Fluss des Dokuments herausgenommen wird und für das Element im Seitenlayout kein Platz erstellt wird. Andererseits ermöglicht die relative Positionierung ein Element relativ zu seiner normalen Position. Dies bedeutet, dass die Positionierung relativ zur ursprünglichen Position des Elements im Dokumentenfluss ist und der Raum im Seitenlayout immer noch dafür erhalten bleibt.

Wie funktioniert die Eigenschaft "Position: Absolute" in CSS? Das positionierte Element kann mit den Eigenschaften von "Top", "rechts", "unten" und "links" bewegt werden. Wenn jedoch keine Vorfahren Elemente eine andere Position als „statisch“ haben, wird stattdessen der anfängliche Block verwendet. Diese Eigenschaften haben nur Auswirkungen auf positionierte Elemente. Sie geben den Abstand zwischen dem Element und einer oder mehreren Seiten seines enthaltenden Elements an. Zum Beispiel bedeutet „Top: 20px“ die obere Kante des Elements 20px von der oberen Kante seines enthaltenden Elements entfernt.

Wie kann ich ein absolut positioniertes Element in CSS? Setzen Sie zunächst "links: 50%", um die linke Kante des Elements in die Mitte seines übergeordneten Übergangs zu bewegen. Verwenden Sie dann "Transformation: Translatex (-50%)", um das Element durch die Hälfte seiner eigenen Breite nach links zurückzuziehen und es effektiv zu zentrieren. „Absolute“ positioniert das Element relativ zu seinem nächsten positionierten Vorfahren oder zu dem anfänglichen Block. "Behoben" hingegen positioniert das Element relativ zum Browserfenster. Dies bedeutet, dass sich ein festes Element nicht bewegt, selbst wenn die Seite gescrollt ist.

Wie behandelt CSS überlappende Elemente? Diese Eigenschaft gibt die Stapelreihenfolge eines Elements an, das seine Position auf der Z-Achse ist. Ein Element mit einem höheren "Z-Index" wird vor einem Element mit einem niedrigeren "Z-Index" angezeigt.

Was ist der Anfangsblock in CSS? Es ist normalerweise das Ansichtsfenster des Browserfensters, kann aber auch das Seitenfeld sein, wenn die Eigenschaft "Überlauf" des Stammelements nicht "sichtbar" ist. Dies wird das Element so breit und groß wie sein enthaltendes Element.

Was ist der Unterschied zwischen "Breite" und "max-Width" in CSS? Wenn der Inhalt kleiner als der „Max-Width“ ist, bleibt der Inhalt in seiner natürlichen Größe. Diese Eigenschaft definiert das Seitenverhältnis für die Box, nämlich das Verhältnis der Breite zur Höhe. Zum Beispiel wird „Aspektverhältnis: 16/9“ ein Seitenverhältnis von 16: 9 beibehalten.

Das obige ist der detaillierte Inhalt vonDie beiden Möglichkeiten zur Größe von absoluten Elementen in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!