Heim > Artikel > Web-Frontend > Eingehende Analyse und Verständnis der Details der Positionierung und des Layouts in CSS
Eingehende Analyse und Verständnis der Details der Positionierung und des Layouts in CSS
- WBOYOriginal
- 2021-12-22 18:32:081722Durchsuche
Dieser Artikel vermittelt Ihnen relevantes Wissen über das CSS-Positionierungslayout. Werfen wir einen Blick auf die relative Positionierung, die absolute Positionierung und die feste Positionierung, die verschiedenen Elementeigenschaften und -verwendungen usw. Wir hoffen, dass er für alle hilfreich ist.
1. Relative Positionierung
1.1) Was ist relative Positionierung?
Relative Positionierung: Die Box kann entsprechend ihrer ursprünglichen Position positioniert werden (implementiert durch Positionsdeskriptoren).
Positionsbeschreibungen:
nach rechts bewegen; nach links bewegen; nach unten bewegen; (Wenn der Wert darin eine negative Zahl ist, bewegen Sie sich in die entgegengesetzte Richtung)
Original:
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相对定位</title>
<style>
* {
margin: 0;
padding: 0;
}
p {
width: 500px;
height: 500px;
border: 1px solid #000;
margin: 50px auto;
}
p {
width: 100px;
height: 100px;
background-color: lightblue;
position: relative;
top: 50px;
left: 50px;
}
</style></head><body>
<p>
<p></p>
</p></body></html>
p auf relative Positionierung setzen:
p {
width: 100px;
height: 100px;
background-color: lightblue;
position: relative;
top: 50px;
left: 50px;}
Eigenschaften
- Relativ positionierte Elemente sind im Wesentlichen noch im Original Positionen, es wird lediglich an einer neuen Stelle gerendert und hat keinen Einfluss auf andere Elemente der Seite.
Verwenden
- Wird zur Feinabstimmung der Position von Elementen verwendet
- Das relative Positionierungsfeld kann als Referenzfeld für die absolute Positionierung verwendet werden
nbsp;html>
<meta>
<meta>
<meta>
<title>相对定位</title>
<style>
* {
margin: 0;
padding: 0;
}
nav {
width: 780px;
height: 50px;
margin: 40px auto;
}
nav ul {
list-style: none;
}
nav ul li {
float: left;
width: 156px;
height: 50px;
line-height: 50px;
text-align: center;
}
nav ul li a {
display: block;
width: 156px;
height: 50px;
background-color: lightcyan;
color: #000;
text-decoration: none;
}
nav ul li a:hover {
border-top: 3px solid red;
}
</style>
<nav>
<ul>
<li>
<a>导航一</a>
</li>
<li>
<a>导航二</a>
</li>
<li>
<a>导航三</a>
</li>
<li>
<a>导航四</a>
</li>
<li>
<a>导航五</a>
</li>
</ul>
</nav>Der Effekt zu diesem Zeitpunkt ist wie folgt Folgendes: 
Sie werden Folgendes finden: Wenn die Maus darüber schwebt, sinkt der Navigationsbereich.
Nachdem wir die relative Positionierung dafür festgelegt und eine Feinabstimmung vorgenommen haben:
nav ul li a:hover {
border-top: 3px solid red;
position: relative;
top: -3px;}
Damit wird das Problem gerade gelöst
2. Absolute Positionierung2.1) Was ist absolute PositionierungAbsolute Positionierung: Die Box beschreibt ihre Position mit Koordinaten und hat eine eigene absolute Position.
Absolut positionierte Referenzbox: Eine absolut positionierte Box verwendet die nächstgelegene Box mit Positionierungsattributen unter ihren Vorgängerelementen als Referenzpunkt.
Dieses Kästchen ist normalerweise relativ positioniert, daher wird es auch „das Aussehen des Vaters des Sohnes“ genannt.
Positionsbeschreibungen: links: Abstand nach rechts; oben: Abstand nach oben; unten: Abstand nach unten
rrree
absolut positionierten Kisten sind vertikal zentriert:
nbsp;html>
<meta>
<meta>
<meta>
<title>绝对定位</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: absolute;
width: 500px;
height: 300px;
left: 200px;
top: 100px;
background-color: antiquewhite;
}
</style>
<p>
</p>
absolut positionierte Kisten sind horizontal zentriert:
.box {
position: absolute;
top: 50%;
margin-top: -自己高度一半;}
stacking Order Z-Index-Attribut - Seiten Sie die Überlappung der absolut positionierten Elementreihenfolge. .
.box { position: absolute; left: 50%; margin-left: -自己宽度一半;}
Zu diesem Zeitpunkt legen wir ein Z-Index-Attribut fest, wenn Box1 auf der oberen Ebene angezeigt werden soll.
nbsp;html>
<meta>
<meta>
<meta>
<title>绝对定位</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 300px;
height: 300px;
position: absolute;
left: 100px;
top: 100px;
background-color: antiquewhite;
}
.box2 {
width: 300px;
height: 300px;
position: absolute;
left: 200px;
top: 200px;
background-color: lightblue;
}
</style>
<p></p>
<p></p>
Sehen Sie sich den Effekt an:
Verwendung
Absolute Positionierung wird verwendet, um den Effekt zu „abdecken“ und zu „maskieren“
Es kann in Kombination mit CSS-Sprites verwendet werden
Es kann mit JS kombiniert werden, um Erzielen Sie einige Animationen
- 3. Feste Positionierung
- 3.1) Was ist feste Positionierung?
Feste Positionierung: Unabhängig davon, wie die Seite gescrollt wird, wird die Seite immer als Referenzpunkt verwendet und dort fixiert.
<br/>
3.2) Die Art und Verwendung der festen PositionierungJa Wird verwendet, um zu erkennen, dass einige Elemente immer vor dem aktuellen Fenster angezeigt werden sollten, z. B. die Schaltfläche „Zurück zum Anfang“ beim Durchsuchen einer Seite, die immer an einer bestimmten Position auf der aktuellen Seite angezeigt wird. Zum Beispiel: .box1 {
width: 300px;
height: 300px;
position: absolute;
left: 100px;
top: 100px;
background-color: antiquewhite;
z-index: 100;}.box2 {
width: 300px;
height: 300px;
position: absolute;
left: 200px;
top: 200px;
background-color: lightblue;
z-index: 1;}Der Effekt ist wie folgt: Wenn die Seite den unteren Rand erreicht Wenn , bleibt die Position der Schaltfläche „Zurück nach oben“ in der unteren rechten Ecke unverändert. Bei Interesse können Sie weiterhin Folgendes besuchen:
CSS-Video-Tutorial
.Das obige ist der detaillierte Inhalt vonEingehende Analyse und Verständnis der Details der Positionierung und des Layouts in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!