Heim >Web-Frontend >HTML-Tutorial >Was sind die Positionierungsmodelle in CSS?
Was sind die Positionierungsmodelle in CSS?
- 零下一度Original
- 2017-06-24 14:00:371255Durchsuche
Positionierungsmodell 8. Juni 2017 fanbright
CSS unterstützt 6 Positionierungsmodelle
statisch
-
Absolut
Fest
Relativ
Gleitend
Relativ gleitend
Position festlegen
position:static; Sie können die Positionierungseinstellung des Elements aufheben und es in seine ursprüngliche Position zurückversetzen. Der Anzeigemodus im regulären flow.static ist der Standardwert.
-
position:relative; kann die Position des Elements um einen bestimmten Abstand relativ zum regulären Flow verschieben.
position:absolute; kann das Element um einen bestimmten Abstand relativ zur Position des regulären Flusses oder der Position des nächstgelegenen positionierten Vorgängerelements verschieben.
position:fixed; kann den relativen Abstand des Elements zum Fenster festlegen.
Z-Index kann die Stapelreihenfolge der Elemente festlegen ist.
最近定位祖先元素
Wenn das Element, das die Position festlegt, kein positioniertes Vorgängerelement hat, dann
<body>wird zum positionierten Vorgängerelement. Mit anderen Worten:<body>ist die Standardposition.Das zuletzt positionierte Element muss ein gültiges Vorgängerelement sein (relativ|absolut|fest). . CSS unterstützt keine Positionierung relativ zu irgendeinem Element im Dokument.
-
position:relative; ist eine sehr gute Möglichkeit, positionierte Vorgängerelemente zu erstellen, da es den regulären Fluss nicht verlässt Mit dieser Methode können Sie ein Layout erstellen, das einen regelmäßigen Fluss beibehält und eine absolute Positionierung erreicht.
原子显示Das Element mit einer festgelegten Position ist
und statische Elemente auf Blockebene ohne festgelegte Positionen, überlappen sich ihre Inline-Inhalte nicht, ihr原子显示, was bedeutet, dass keine externen Elemente dies können werden zwischen seinen statischen Nachkommen, Inline-Inhalten und dem Hintergrund angezeigt. Im相对定位,绝对定位和固定定位-Modus können Elemente auf Blockebene, die aufoverflow:scroll|autoeingestellt sind, auch atomar angezeigt werden 🎜> jedoch nicht
边框和背景gilt für alle Elemente, der standardmäßige automatische文字
z-index
Z-Index ist kein globales Attribut, sondern wird relativ zum zuletzt positionierten Attribut bestimmt Vorfahrenelement mit einem numerischen Wert Z-Index wird erstellt. Root-Stacking-Kontext. Jedes positionierte Element mit einem angegebenen numerischen Wert Z-Index erstellt einen lokalen lokalen Stacking-Kontext 🎜>Statisch positionierte Elemente werden von hinten nach vorne in der Reihenfolge angeordnet, in der sie im Dokumentstapel erscheinen.Das Festlegen des Positionselements ignoriert die Reihenfolge, in der die Dokumentelemente erscheinen. sondern stapelt sie von hinten nach vorne entsprechend dem Z-Index-Wert von klein nach groß. Festlegen der Position negativer Werte. Elemente befinden sich unter statisch positionierten Elementen und nicht positionierten schwebenden Elementen
- Ein statisches Positionierungsmodell
- position:static; die Standardeinstellung ist static
- Die Startposition des statischen Elements wird bestimmt durch Die Position des vorherigen statischen Elements
,
und
wird bestimmt. Die Startposition des nächsten Elements Die vertikalen Ränder benachbarter Elemente sindzusammen, und der endgültige Rand ist der
- Stellen Sie den linken und rechten Rand auf „Automatisch“. um die
- Elemente von
尺寸内边距边框外边距Zwei absolute Positionierungsmodelle - position:absolute;
合并zu zentrieren较大值 - ist relativ zur Größe des zuletzt positionierten Vorgängerelements, während die Größe von
.
已设定尺寸静态块级Links und rechts festlegen , Ober- und Unterseite des Elements auf
ursprüngliche Position im regulären Fluss zu ändern.
Im Gegensatz zu schwebenden Elementen werden absolute Elemente nicht automatisch angeordnet wird weder von anderen Elementen noch von anderen Elementen beeinflusst
- Wenn alle untergeordneten Elemente eines Elements auf absolute Positionierung eingestellt sind, wird seine Höhe zu
und alle seine untergeordneten Elemente verlassen den regulären Fluss
百分数非父元素Wenn kein positioniertes Vorgängerelement vorhanden ist, wird es gemäß
automit absoluter Positionierung positioniert und Zentrierung, allgemeine Elemente恢复 mit absoluter Positionierung und Zentrierung, statische Inline-Elemente -
für statische Inline-Elemente wie em, strong, span usw., jedoch nicht inline austauschbar Bei Verwendung des absoluten Positionierungsmodus „Absolut“, „Breite“ und „Rechts“ müssen Sie ein zusätzliches
hinzufügen, damit der Rand automatisch ist tritt normal in Kraft. Beachten Sie, dass hier nur links und rechts 0- Modell mit drei festen Positionierungen
funktionieren position:fixed; kann jedes Element in ein Element mit fester Position umwandeln<body>div{ position:absolute; width:200px; height:200px; margin:0 auto; border:1px solid blue; /*left:0;*/ 这两条没用,没有影响 /*right:0;*/ }Denken Sie daran: Die Position eines Elements mit fester Position ist relativ zuund
left:0;和right:0;ist relativ zu „Zuletzt positionierter Vorfahre“ und das Element wird beim Scrollen der Seite nicht gescrollt. -
Da es relativ zur Seite positioniert ist, ist es am besten, bei der Einstellung „oben“ und „links“ für die versetzte Positionierung zu verwenden. links, unten, rechts, die Werte von oben und links werden verwendet
sind, werden unten und rechts wirksam不需要最近定位祖先Nur wenn oben und links 优先不存在Vier relative Positionierungen
Verwenden Sie links und oben, um die Position des Elements zu ändern Standardmäßig ist „Auto“ eingestellt, „Auto“ behält relativ positionierte Elemente im regulären Fluss in ihrer ursprünglichen Position.
- Jedes Element kann position:relative; festlegen, sodass seine absolut positionierten Nachkommenelemente relativ positioniert werden können dazu.
Fünf Float-Positionierung und Zurücksetzen
Verwenden Sie float:none; der Standardwert ist none, wodurch andere Floating-Regeln des Elements überschrieben werden können und das Erben von Floats vermieden werden kann
- Schwebende Elemente haben keinen Einfluss auf die Position der Box auf Blockebene, sondern wirken sich nur auf Inline-Elemente aus
- clear:left;clear:right;clear;both;
- Jedes Element kann festgelegt werden. Für schwebende Elemente gilt „clear“ für Tabellen, Elemente auf Blockebene und schwebende Elemente.
- clear gilt nicht für
,
oder Elemente 行内绝对定位固定定位Sechs relative schwebende Positionierung
Nur position:relative; und position:static; sind auf „absolut“ und „fest“ eingestellt, das Anzeigeergebnis ist unsicher
Gestreut
- Wenn der Parameter in CSS den Wert 0 hat, fügen Sie keine Einheiten hinzu.
Das obige ist der detaillierte Inhalt vonWas sind die Positionierungsmodelle in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!