Eine detaillierte Analyse der Positionierung des CSS-Boxmodells

CSSBox-Modell Positionierung

1. StatischePositionierung

Der Standardwert des HTML-Elements , was bedeutet, dass keine Positionierung erfolgt und das Element im normalen Fluss angezeigt wird.
Statisch positionierte Elemente werden von oben, unten, links, rechts nicht beeinflusst.

2. Feste Positionierung

Die Position des Elements ist eine feste Position relativ zum Browserfenster.
Es bewegt sich nicht, auch wenn das Fenster gescrollt wird:

Feste Positionierung positioniert das Element unabhängig vom Dokumentenfluss, sodass es keinen Platz einnimmt.
Fest positionierte Elemente überlappen sich mit anderen Elementen.

3. Relative Positionierung

Die Positionierung eines relativ positionierten Elements erfolgt relativ zu seiner normalen Position.

Der Inhalt relativ positionierter Elemente und Elemente, die sich überlappen, kann verschoben werden, und der Platz, den sie ursprünglich einnehmen, ändert sich nicht.

relativ positionierte Elemente werden häufig als Containerblöcke für absolut positionierte Elemente verwendet.

4. Absolute Positionierung

Die Position eines absolut positionierten Elements ist relativ zum nächstgelegenen positionierten übergeordneten Element ist relativ zu:

Absolute Positionierung positioniert das Element unabhängig vom Fluss des Dokuments, sodass es keinen Platz einnimmt.
Absolut positionierte Elemente überlappen sich mit anderen Elementen.

Überlappende Elemente
Elemente werden unabhängig vom Dokumentfluss positioniert, sodass sie andere Elemente auf der Seite
Z-Index abdecken können Das Attribut gibt die Stapelreihenfolge eines Elements an (welches Element vorne oder hinten sein soll).
Ein Element kann eine positive oder negative Stapelreihenfolge haben:
Das Element mit einer höheren Stapelreihenfolge ist immer drin Die Vorderseite der Elemente mit niedrigerer Stapelreihenfolge.
Hinweis: Wenn sich zwei positionierte Elemente überlappen und kein Z-Index angegeben ist, wird das zuletzt im HTML-Code positionierte Element zuerst angezeigt.

Der Unterschied zwischen relativer und absoluter Positionierung

Absolute Positionierung (absolut):
1. Das Objekt , dem diese Positionierung zugewiesen wird Die Methode wird zugewiesen. Ziehen Sie es aus dem Dokumentfluss und verwenden Sie die Attribute „Links“, „Rechts“, „Oben“, „Unten“ und andere, um eine absolute Positionierung relativ zu seinem nächstgelegenen übergeordneten Objekt mit den meisten Positionierungseinstellungen durchzuführen Attributen folgt es weiterhin der HTML-Positionierung. Wenn es regelmäßig ist, wird es basierend auf der oberen linken Ecke des Körperobjekts als Referenz positioniert.
2. Absolut positionierte Objekte können gestapelt werden, und die Stapelreihenfolge kann über das Z-Index-Attribut gesteuert werden. Der Z-Index-Wert ist eine einheitenlose Ganzzahl, wobei der größere Wert oben liegt negative Werte haben.
Relativ zur nächstgelegenen nicht standardmäßigen Stream-Positionierung verschwindet die ursprüngliche Position und wird durch die nachfolgende Position ersetzt

Relative Positionierung (relativ):
Relativ zur ursprünglichen Position, aber die ursprüngliche Position bleibt erhalten .
Objekte können nicht gestapelt werden und ihre Positionen werden im normalen Dokumentenfluss entsprechend links, rechts, oben, unten und anderen Attributen versetzt.
Sie können auch das Z-Index-Schichtdesign verwenden.

[Tutorial] Verstehen Sie den CSS-Box-Modus vier (absolute Positionierung und relative Positionierung) gründlich

Beispiel:

<meta charset="UTF-8" />
<title></title>
<style type="text/css">
/*多个标签同时设置，使用逗号分隔*/
        body, p, ul, li, img, a {
            margin: 0;
            padding: 0;
        }

        /*给定图片尺寸：否则会超出父容器，堆叠在一起*/
        img {
            width: 100%;
            height: 100%
        }

        /*让a标签绝对于li标签，li要设置relative*/
        li {
            list-style: none;
            position: relative;
            float: left;
            padding: 1%;
            width: 18%;
        }

        /*让删除红叉处于li的右上角，且需给定大小*/
        a {
            background: url(images/close.png);
            width: 16px;
            height: 16px;
            position: absolute;
            top: 0;
            right: 0;
        }</style>

Rendering:

Das obige ist der detaillierte Inhalt vonEine detaillierte Analyse der Positionierung des CSS-Boxmodells. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!