CSS, was relative Positionierung ist-CSS-Tutorial-php.cn

CSS, was relative Positionierung ist

WBOY

Freigeben： 2024-02-23 11:39:04

Original

1054 Leute haben es durchsucht

CSS, was relative Positionierung ist

CSS-Relativpositionierung bedeutet, dass ein Element relativ zu seiner ursprünglichen Position positioniert wird und die verschobene Position keinen Einfluss auf das Layout anderer Elemente hat.

Das Merkmal der relativen Positionierung besteht darin, dass das Element weiterhin den ursprünglichen Platz einnimmt, ohne den Dokumentfluss zu unterbrechen oder das Layout anderer Elemente zu beeinträchtigen. Seine Positionierung wird relativ zum Element selbst berechnet und die Position des Elements kann über die Attribute oben, rechts, unten und links angegeben werden.

Hier ist ein konkretes Codebeispiel:

<!DOCTYPE html>
<html>
<head>
<style>
    .container {
        position: relative;
        width: 300px;
        height: 300px;
        background-color: lightgrey;
    }
    
    .box {
        position: relative;
        width: 100px;
        height: 100px;
        background-color: red;
        top: 50px;
        left: 50px;
    }
</style>
</head>
<body>

<div class="container">
    <div class="box"></div>
</div>

</body>
</html>

Nach dem Login kopieren

Im obigen Beispiel haben wir einen Container mit einer Breite von 300 Pixel und einer Höhe von 300 Pixel erstellt, mit einer Hintergrundfarbe von Hellgrau. Anschließend wird im Container ein Feld mit einer Breite von 100 Pixel und einer Höhe von 100 Pixel mit der Hintergrundfarbe Rot erstellt. Durch Hinzufügen des Attributs position: relative zur Box stellen wir die Box auf relative Positionierung ein.

Als nächstes verschieben wir das Feld um 50 Pixel nach unten und rechts, indem wir die Eigenschaften „oben: 50px“ und „links: 50px“ verwenden. Dadurch wird das Feld relativ zu seiner ursprünglichen Position nach unten und rechts verschoben.

Es ist zu beachten, dass die Bewegung der relativen Positionierung relativ zum Element selbst ist, d. h., obwohl sich die Box bewegt hat, nimmt sie immer noch die ursprüngliche Position ein. Andere Elemente sind davon nicht betroffen und es werden keine Layoutänderungen vorgenommen.

Zusammenfassend lässt sich sagen, dass die relative Positionierung eine Möglichkeit ist, relativ zur ursprünglichen Position zu positionieren. Die verschobene Position hat keinen Einfluss auf das Layout anderer Elemente. Die Position des Elements kann über die Attribute oben, rechts, unten und links gesteuert werden.

Das obige ist der detaillierte Inhalt vonCSS, was relative Positionierung ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!