Verwendung des Positionsattributs in CSS: 1. Allgemeine Beschriftungselemente ohne Positionierungsattribute sind statische Positionierungen. 2. Absolut positionierte Elemente werden aus dem Dokumentfluss herausgezogen. 4. Feste Positionierungen sind nicht möglich ähnelt der absoluten Positionierung, wird jedoch relativ zum Browserfenster positioniert und scrollt nicht mit der Bildlaufleiste.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3-Version, DELL G3-Computer.
Verwendung des Positionsattributs in CSS:
1. Statische Positionierung (statisch)
Allgemeine Beschriftungselemente ohne Positionierungsattribute sind statische Positionierungen und gehören zum Standardfluss am Ende der Seite.
2. Absolute Positionierung (absolut)
Ziehen Sie das absolut positionierte Element aus dem Dokumentfluss und verwenden Sie Attribute wie links, rechts, oben, unten usw., um es relativ zu seinem nächstgelegenen übergeordneten Element zu positionieren Die meisten Positionierungseinstellungen sind absolut. Wenn das übergeordnete Element das Positionierungsattribut nicht festlegt, wird es basierend auf der oberen linken Ecke des Körperelements als Referenz positioniert. Absolut positionierte Elemente können gestapelt werden, und die Stapelreihenfolge kann über das Z-Index-Attribut gesteuert werden. Der Z-Index-Wert ist eine ganze Zahl ohne Einheit, wobei der größere Wert oben liegt, und kann negative Werte haben.
Absolute Positionierungsmethode:
Wenn das übergeordnete Element auf eine andere Position als statisch eingestellt ist, z. B. Position: relativ oder Position: absolut und Position: fest, wird es relativ zu seinem übergeordneten Element positioniert angegeben durch die Attribute links, oben, rechts und unten
Wenn für das übergeordnete Element keine Positionierung festgelegt ist, müssen Sie überprüfen, ob die Positionierung für das übergeordnete Element festgelegt ist.
Wenn dies immer noch nicht der Fall ist, Fahren Sie mit der höheren Ebene fort, kurz gesagt, seine Positionierung erfolgt relativ zum ersten Vorgängerelement, das eine andere als die statische Positionierung hat.
Wenn nicht alle Vorgängerelemente eine der oben genannten drei Positionierungen haben Es wird relativ zum Dokumentkörper positioniert (nicht relativ zum Browserfenster, das relativ zur Fensterposition festgelegt ist).
<head>
<style type="text/css">
.box {
background: red;
width: 100px;
height: 100px;
float: left;
margin: 5px;
}
.two {
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="box" >One</div>
<div class="box two" >Two</div>
<div class="box" >Three</div>
<div class="box">Four</div>
</body>Positionieren Sie das Div mit class="two" 50 Pixel von oben und 50 Pixel von links. Dadurch wird das Layout anderer Elemente geändert und an der ursprünglichen Position dieses Elements bleibt kein Leerraum zurück.
3. Relative Positionierung (relativ)
Relativ positionierte Elemente können nicht gestapelt werden und können ihre Position im normalen Dokumentenfluss basierend auf Attributen wie links, rechts, oben und unten versetzen. Sie können auch das hierarchische Z-Index-Design verwenden.
<head>
<style type="text/css">
.box {
background: red;
width: 100px;
height: 100px;
float: left;
margin: 5px;
}
.two {
position: relative;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="box" >One</div>
<div class="box two" >Two</div>
<div class="box" >Three</div>
<div class="box">Four</div>
</body>Positionieren Sie das Div mit class="two" 50 Pixel von oben und links von seiner ursprünglichen Position. Das Layout anderer Elemente wird dadurch nicht geändert, es bleibt jedoch ein Leerraum an der ursprünglichen Position dieses Elements.
4. Feste Positionierung (fest)
Die feste Positionierung ähnelt der absoluten Positionierung, wird jedoch relativ zum Browserfenster positioniert und scrollt nicht mit der Bildlaufleiste.
Eine der häufigsten Anwendungen der festen Positionierung besteht darin, eine feste Kopfzeile, eine feste Fußzeile oder eine feste Seitenleiste auf der Seite zu erstellen, ohne einen Rand, einen Rand oder einen Abstand zu verwenden.
Verwandte Lernempfehlungen: CSS-Tutorial
Das obige ist der detaillierte Inhalt vonWas ist die Verwendung des Positionsattributs in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
