Interpretation der CSS-Kaskadierungseigenschaften: Z-Index und Position-CSS-Tutorial-php.cn

Interpretation der CSS-Kaskadierungseigenschaften: Z-Index und Position

WBOY

Freigeben： 2023-10-20 19:19:54

Original

1515 Leute haben es durchsucht

CSS 层叠属性解读：z-index 和 position

Interpretation der CSS-Kaskadierungseigenschaften: Z-Index und Position

In CSS ist die Gestaltung von Layout und Stil sehr wichtig. Im Design ist es oft notwendig, Elemente zu schichten und zu positionieren. Zwei wichtige CSS-Eigenschaften, Z-Index und Position, können uns dabei helfen, diese Anforderungen zu erfüllen. Dieser Artikel befasst sich mit diesen beiden Eigenschaften und stellt spezifische Codebeispiele bereit.

1. Z-Index-Attribut

Das Z-Index-Attribut wird verwendet, um die Stapelreihenfolge von Elementen in vertikaler Richtung zu definieren. Die Stapelreihenfolge der Elemente wird durch den Wert des Z-Index-Attributs bestimmt, wobei Elemente mit höheren Werten Elemente mit niedrigeren Werten überdecken. Der Wert dieses Attributs kann positiv, negativ oder automatisch sein.

Hier ist ein Beispiel, das zeigt, wie das Z-Index-Attribut verwendet wird:

<html>
<head>
<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: red;
        position: absolute;
        top: 50px;
        left: 50px;
    }
    .box1 {
        z-index: 1;
    }
    .box2 {
        z-index: 2;
    }
</style>
</head>
<body>
    <div class="box box1"></div>
    <div class="box box2"></div>
</body>
</html>

Nach dem Login kopieren

Im obigen Code werden zwei rote Quadrate erstellt und ihre Positionen überlappen sich. Der Z-Index-Attributwert von Box1 ist 1 und der Z-Index-Attributwert von Box2 ist 2. Box2 verdeckt also Box1 und erscheint oben.

Es ist erwähnenswert, dass nur Elemente, deren Positionierungsattribut (Position) nicht statisch ist (d. h. relativ, absolut, fest, klebrig), vom Z-Index-Attribut betroffen sein können. Dies liegt daran, dass nur Elemente, deren Positionierungsattribute nicht statisch sind, einen kaskadierenden Kontext generieren können.

2. Positionsattribut

Das Positionsattribut wird verwendet, um den Positionierungstyp des Elements anzugeben. Es gibt vier mögliche Werte: statisch, relativ, absolut und fest.

statisch:
Standardwert: Das Element wird gemäß dem normalen Dokumentfluss positioniert, wobei Positionierungsattribute wie oben, rechts, unten und links ignoriert werden.
relativ: Das
-Element wird entsprechend seiner normalen Position positioniert und die Position wird durch Attribute wie oben, rechts, unten und links feinabgestimmt. Durch die relative Positionierung wird das Element nicht aus dem Dokumentfluss entfernt.
absolut: Das
-Element wird relativ zu seinem nächsten nicht statisch positionierten Vorfahren positioniert (oder relativ zum ursprünglichen enthaltenden Block, falls keiner vorhanden ist). Positionieren Sie das Element durch Attribute wie oben, rechts, unten und links, um das Element vom Dokumentfluss zu trennen.
behoben: Das
-Element wird durch Attribute wie oben, rechts, unten und links relativ zum Browserfenster positioniert. Das Element bleibt auch beim Scrollen der Seite an einer festen Position. Ähnlich wie bei der absoluten Positionierung wird auch dieses Element aus dem Dokumentenfluss entfernt.

Hier ist ein Beispiel, das zeigt, wie das Positionsattribut verwendet wird:

<html>
<head>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            position: relative;
            top: 50px;
            left: 50px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

Nach dem Login kopieren

Im obigen Code wird ein rotes Quadrat erstellt und sein Positionierungstyp wird auf relativ gesetzt. Verschieben Sie das Feld mithilfe der Eigenschaften „oben“ und „links“ um 50 Pixel nach unten und 50 Pixel nach rechts relativ zu seiner normalen Position.

Zusammenfassend lässt sich sagen, dass Z-Index und Position wichtige Eigenschaften für die Realisierung der CSS-Kaskadierung und -Positionierung sind. Durch die entsprechende Verwendung dieser beiden Attribute und deren Kombination mit spezifischen Anforderungen an die Positionierung und Stapelreihenfolge können wir die Seitenelemente präzise steuern. Wir hoffen, dass die in diesem Artikel bereitgestellten Codebeispiele den Lesern helfen, diese beiden Eigenschaften besser zu verstehen und anzuwenden.

Das obige ist der detaillierte Inhalt vonInterpretation der CSS-Kaskadierungseigenschaften: Z-Index und Position. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!