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 原子显示, 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 auf overflow:scroll|auto eingestellt sind, auch atomar angezeigt werden 🎜>
und statische Elemente auf Blockebene ohne festgelegte Positionen, überlappen sich ihre Inline-Inhalte nicht, ihr

边框和背景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

position:static; die Standardeinstellung ist static

und

wird bestimmt. Die Startposition des nächsten Elements Die vertikalen Ränder benachbarter Elemente sind

zusammen, und der endgültige Rand ist der

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
.已设定尺寸静态块级

, um seine

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 百分数非父元素
gemäß auto mit absoluter Positionierung positioniert und Zentrierung, allgemeine 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.
0
Modell mit drei festen Positionierungen
<body>
funktionieren position:fixed; kann jedes Element in ein Element mit fester Position umwandeln
```
 div{
            position:absolute;
            width:200px;
            height:200px;
            margin:0 auto;
            border:1px solid blue;
            /*left:0;*/ 这两条没用,没有影响
            /*right:0;*/
}
```
Nach dem Login kopieren
Denken Sie daran: Die Position eines Elements mit fester Position ist relativ zu
und 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 不需要最近定位祖先 Nur wenn oben und links
sind, werden unten und rechts wirksam
优先不存在Vier relative Positionierungen

position:relative;

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:left; und float:right;, damit Elemente den regulären Fluss verlassen.

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
行内绝对定位固定定位Sechs relative schwebende Positionierung

Die Verwendung von Float kann dazu führen, dass einige Elemente schwebende Elemente auf relative Positionierung eingestellt werden durch relative und relative schwebende Elemente befinden sich immer noch dort, wo sich die schwebenden Elemente befinden. In einem regulären Fluss können Sie die Offset-Position im Fluss

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.

Bevor der Inhalt eines Elements gerendert wird, wird er zuerst gerendert Sein Rahmen. Die Reihenfolge beginnt mit der Hintergrundfarbe, dann mit dem Hintergrundbild und schließlich mit dem Rand. Schließlich rendert der Browser den Inhalt der Box über der Box

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!