Heim >Web-Frontend >CSS-Tutorial >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:087822Durchsuche
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:
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!