Was sind die drei Positionierungsmethoden von CSS?-CSS-Tutorial-php.cn

Was sind die drei Positionierungsmethoden von CSS?

青灯夜游

Freigeben： 2021-11-02 12:00:58

Original

12629 Leute haben es durchsucht

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;“.

Was sind die drei Positionierungsmethoden von CSS?

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;

Nach dem Login kopieren

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>

Nach dem Login kopieren

Feste Positionierung

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

position:fixed;

Nach dem Login kopieren

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>

Nach dem Login kopieren

Absolute Positionierung

position:absolute;

Nach dem Login kopieren

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>

Nach dem Login kopieren

(Teilen von Lernvideos:

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!