Heim > Artikel > Web-Frontend > CSS absolute Positionierung

CSS absolute Positionierung

无忌哥哥Original: 2018-06-28 17:56:521940Durchsuche

Vier Positionierungsmodi: statisch, relativ, absolut, fest

Vier Positionierungspositionen: links, rechts, oben, unten

Positionierungsattribut: Position, hat vier Statuswerte

1.statisch: statische Positionierung, in der Reihenfolge der Elemente im Dokumentfluss angeordnet, dies ist der Standardwert, die vier Positionen sind ungültig

2.relativ: relative Positionierung, das Element ist relativ zum Original Es wird im Dokumentenfluss positioniert, vier Positionen sind gültig

3.absolut: Absolute Positionierung, das Element wird relativ zu seinem positionierenden übergeordneten Element positioniert, außerhalb des Dokumentenflusses sind vier Positionen gültig

4.fixed: Feste Positionierung, ähnlich der absoluten Positionierungsklasse, ist auch vom Dokumentfluss getrennt. Die Position des Elements auf der Seite ist fixiert und scrollt nicht mit der Seite

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>2.绝对定位</title>
    <style>
        /*body {*/
            /*border: 1px solid red;*/
        /*}*/
        .box {
            width: 600px;
            height: 600px;
            background-color: yellow;
        }
        .box1 {
            width:200px;
            height: 200px;
            background-color: lightskyblue;
                  position: absolute;
                  top:0;
            right:0;
}
        .box2 {
            width:200px;
            /*width:250px;*/
            height: 200px;
            /*height: 250px;*/
            background-color: lightgreen;
        }
        .box3 {
            width:200px;
            height: 200px;
            background-color: lightcoral; /*珊瑚色*/
        }
        .box4 {
            width:200px;
            height: 200px;
            background-color: brown;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box1"></div>
</div>
</body>
</html>

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

css Static position

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：CSS relative PositionierungNächster Artikel：CSS relative Positionierung

In Verbindung stehende Artikel

Mehr sehen