In CSS gibt es drei grundlegende Formen von Layoutmechanismen: gewöhnliche Strömung, Floating und absolute Positionierung. Verwenden Sie die Positionierung, um die Position eines Elements oder die Position eines Elements relativ zu seinem übergeordneten Element, einem anderen Element oder dem Browserfenster genau zu definieren.
1. Positionierung positionieren:
Fünf Werte:- statisch
- relativ
- Fest
- absolut
- klebrig
1. statisch:
Der Standardwert des HTML-Elements, dh keine Positionierung, folgt dem normalen Dokumentflussobjekt. Statisch positionierte Elemente werden von oben, unten, links und rechts nicht beeinflusst.HTML Quelltext:
<div class="box1">
</div>
CSS-Code vor dem Hinzufügen von links und oben:
.box1{
width: 300px;
height: 50px;
position:static;
background-color: paleturquoise;
margin:20px auto;
}
Nach dem Hinzufügen:
.box1{
width: 300px;
height: 50px;
position:static;
background-color: paleturquoise;
margin:20px auto;
top:200px;
left:200px;
}
Hinweis: Der Standort wurde nicht geändert
2.relative:
Die relative Positionierung ist relativ zu ihrer ursprünglichen Position, und der ursprünglich belegte Platz bleibt erhalten.<div class="box1">
</div>
Vor dem Hinzufügen von oben und links:
.box1{
width: 300px;
height: 50px;
position:relative;
background-color: paleturquoise;
margin:20px auto;
}
Nach dem Hinzufügen:
3. absolut:
Positionieren Sie die absolute Positionierung von Elementen relativ zum nächstgelegenen positionierten übergeordneten Element. Wenn das Element noch nicht übergeordnet ist , hat seine Position relativ zum HTML-Tag . Die absolute Positionierung der Position des Dokumentelementflusses hat nichts zu tun . Nehmen Sie also nicht auf Leerzeichen, absolut Das positionierte Element überlappt andere Elemente. HTML:<div class="box1">
</div>
<div class="box2">
</div>
CSS:
.box1{
width: 300px;
height: 50px;
background-color: paleturquoise;
margin:20px;
position: absolute;
}
.box2{
width: 300px;
height: 50px;
background-color: #437aee;
}
4. behoben
Die Position des Elements relativ zum Browserfenster ist eine feste Position , auch wenn sich das Fenster rollt, bewegt es sich nicht.
5. klebrig
Position basierend auf der Bildlaufposition des Benutzers.
-
Klebrige Positionierungselemente hängen vom Bildlauf des Benutzers ab und wechseln zwischen Position: relativ und Position: feste Positionierung.
-
Es verhält sich wie Position: relativ,
und wenn die Seite über den Zielbereich hinaus rollt, verhält es sich wie Position: fest, und es wird an der Zielposition fixiert.HTML:
<div class="sticky">我是粘性定位!</div>
<div style="padding-bottom:2000px;background-color: #b9d1ee">
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
</div>
CSS:
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #83dde8;
border: 2px solid #3da0af;
}
2. Enthält Blöcke:
Block enthalten: Dies ist ein wichtiges Konzept des visuellen Formatierungsmodells. Ähnlich wie das Box-Modell kann es auch als Rechteck verstanden werden. Die Funktion besteht darin, eine Referenz für die darin enthaltenen Elemente bereitzustellen. Die Berechnung der Größe und Position des Elements wird häufig durch den enthaltenen Block bestimmt, in dem sich das Element befindet.
1. Wurzelelement:
Der enthaltende Block des Stammelements ist ein Rechteck von der Größe des Fensters, das das übergeordnete Dokument von HTML ist.
2. Nicht-Root-Elemente:
Wenn die Position relativ oder statisch ist , wird der enthaltende Block durch die Inhaltsgrenze des nächsten Elements gebildet.
HTML:
<div class="box1">
<div class="box2">
box2
</div>
</div>
CSS:
.box1{
background-color: paleturquoise;
margin:20px;
padding:20px;
height: 200px;
}
.box2{
width: 300px;
position: relative;
background-color: #b9d1ee;
padding:20px;
}
Wenn der Positionswert absolut ist , wird der enthaltende Block auf das nächste Vorfahrenelement gesetzt, dessen Positionswert nicht statisch ist.
- Wenn der Vorfahr ein Element auf Blockebene ist, wird der enthaltende Block als Inhaltsgrenze des Elements festgelegt.
HTML:
<div class="box1">
<div class="box2">
box2
</div>
</div>
CSS:
.box1{
background-color: paleturquoise;
margin:20px;
padding:20px;
height: 200px;
}
.box2{
width: 300px;
position: absolute;
background-color: #b9d1ee;
padding:20px;
}
- Wenn es keinen Vorfahren gibt, wird der enthaltende Block des Elements als der anfängliche enthaltende Block definiert, bei dem es sich um ein Dokument handelt