Heim > Artikel > Web-Frontend > Was sind die drei Positionierungsmethoden von CSS?

Was sind die drei Positionierungsmethoden von CSS?

青灯夜游Original: 2021-11-02 12:00:5812490Durchsuche

Die drei Positionierungsmethoden von CSS sind: 1. Relative Positionierung, die Position des Elements wird relativ zu seiner ursprünglichen Position berechnet, die Syntax „position:relative;“ 2. Feste Positionierung, die Syntax „position:fixed;“ ; 3 , Absolute Positionierung, Syntax „position:absolute;“.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Relative Positionierung

Die Position des Elements wird relativ zu seiner ursprünglichen Position berechnet.

position:relative;

Es bezieht sich standardmäßig auf den ursprünglichen Punkt des übergeordneten Elements und wird mit oben, rechts, unten und links positioniert.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>相对定位</title>
<style type="text/css">
.king{
margin-top: 30px;
margin-left: 30px;
border: 1px solid silver;
background-color: skyblue;
width: 40%;
}
.king div{
width: 100px;
height: 60px;
margin: 10px;
background-color: snow;
color: black;
border: 1px solid black;
}
.three{
position: relative;
top: 20px;
left: 50px;
}
</style>
<body>
<div class="king">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
<div class="four">four</div>
</div>
</body>
</html>

Feste Positionierung

Das feste Element ändert seine Position nicht, wenn die Bildlaufleiste gezogen wird.

position:fixed;

Standardmäßig ist die Position des festen Positionierungselements relativ zum Browser und wird in Verbindung mit den vier Attributen oben, unten, links und rechts verwendet.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>固定定位</title>
<style type="text/css">
.first{
width: 50px;
height: 160px;
border: 1px solid gray;
background-color: #b7f1b7;
}
.second{
position: fixed;
top: 50px;
left: 160px;
width: 150px;
height: 100px;
border: 1px solid silver;
background-color:#b7f1b7;
}
</style>
<body>
<div class="first">div元素</div>
<div class="second">固定定位的div元素</div>
</body>
</html>

Absolute Positionierung

position:absolute;

Standardmäßig ist die Position der absoluten Positionierung relativ zum Browser und wird mit oben, rechts, unten und links positioniert. Die Eigenschaft „z-index“ legt die Stapelreihenfolge der Elemente fest. Elemente mit einer höheren Stapelreihenfolge erscheinen immer vor Elementen mit einer niedrigeren Stapelreihenfolge.

Elemente können negative Z-Index-Attributwerte haben. Z-Index funktioniert nur bei positionierten Elementen (z. B. position:absolute;)

Attributwerte: auto: Standardmäßig entspricht die Stapelreihenfolge der des übergeordneten Elements. Zahl: Legen Sie die Stapelreihenfolge der Elemente fest. erben: Gibt an, dass der Wert des Z-Index-Attributs vom übergeordneten Element geerbt werden soll.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>绝对定位</title>
<style type="text/css">
.king{
padding: 15px;
border: 1px solid silver;
background-color: skyblue;
width: 30%;
}
.king div{
padding: 10px;
}
.one{
background-color: chartreuse;
}
.two{
background-color: cyan;
position: absolute;
top: 20px;
right: 40px;
}
.three{
background-color: darkred;
}
.four{
background-color: dimgrey;
}
</style>
<body>
<div class="king">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
<div class="four">four</div>
</div>
</body>
</html>

CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonWas sind die drei Positionierungsmethoden von CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：8 praktische CSS-Effektcodes, die es wert sind, gesammelt zu werden (Teilen)Nächster Artikel：8 praktische CSS-Effektcodes, die es wert sind, gesammelt zu werden (Teilen)

In Verbindung stehende Artikel

Mehr sehen