Heim > Artikel > Web-Frontend > So führen Sie eine absolute Positionierung in CSS durch

So führen Sie eine absolute Positionierung in CSS durch

清浅Original: 2019-01-11 13:32:087715Durchsuche

Das absolute Attribut stellt die absolute Positionierung dar und legt ihre Position relativ zum nächsten Vorgängerelement durch die oberen, linken, unteren und rechten Werte fest.

[Empfohlener Kurs:CSS-Tutorial]

Die Position eines absolut positionierten Elements ist unabhängig vom Dokumentenfluss Es nimmt also keinen Platz ein. Wenn ein Element auf absolute Positionierung eingestellt ist, wird es vollständig aus dem Dokumentfluss entfernt und relativ zu seinem enthaltenden Block positioniert, der ein anderes Element im Dokument oder der anfängliche enthaltende Block sein kann

Beispiel:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{width:100px;
height: 100px;
background-color: pink;
}
.child{
position: absolute;
background-color: skyblue;
top:50px;
left: 50px;
}
</style>
</head>
<body>
<div>父元素
<div>子元素</div>
</div>
</body>
</html>

Rendering:

So führen Sie eine absolute Positionierung in CSS durch

Aus dem obigen Beispiel können wir ersehen, dass die absolute Positionierung relativ zum nächstgelegenen Vorgängerelement ist relativ zum ursprünglichen enthaltenden Block (Canvas oder HTML-Element)

Hinweis: Die absolute Positionierung hat nichts mit dem Dokumentfluss zu tun, daher können Elemente auf der Seite abgedeckt werden, sodass wir das Z-Index-Attribut auf „Kontrolle“ setzen können die Stapelreihenfolge des Inhalts

Das obige ist der detaillierte Inhalt vonSo führen Sie eine absolute Positionierung in CSS durch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html 堆

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：So erzielen Sie den Einrückungseffekt der ersten ZeileNächster Artikel：So erzielen Sie den Einrückungseffekt der ersten Zeile

In Verbindung stehende Artikel

Mehr sehen