Vier Positionierungsmodi: statisch, relativ, absolut, fest
Vier Positionierungspositionen: links, rechts, oben, unten
Positionierungsattribut: Position, hat vier Statuswerte
1.statisch: statische Positionierung, in der Reihenfolge der Elemente im Dokumentfluss angeordnet, dies ist der Standardwert, die vier Positionen sind ungültig
2.relativ: relative Positionierung, das Element ist relativ zum Original Es wird im Dokumentenfluss positioniert, vier Positionen sind gültig
3.absolut: Absolute Positionierung, das Element wird relativ zu seinem positionierenden übergeordneten Element positioniert, außerhalb des Dokumentenflusses sind vier Positionen gültig
4.fixed: Feste Positionierung, ähnlich der absoluten Positionierungsklasse, ist auch vom Dokumentfluss getrennt. Die Position des Elements auf der Seite ist fixiert und scrollt nicht mit der Seite
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>4.固定定位</title>
<style>
body {
/*将页面高度设置为2000px,使之出现垂直滚动条*/
height:2000px;
}
.box {
width: 200px;
height: 260px;
/*background-color: #6CF;*/
/*固定定位fixed:元素脱离文档流,相对于窗口定位,固定在页面上,并且不随页面滚动*/
/*可以当作是绝对定位的一个特例来看待*/
position:fixed;
top: 200px;
left:50px;
}
</style>
</head>
<body>
<!--<div></div>-->
<!--以在线QQ客服为例进行演示-->
<div><img src="../images/qq.png" alt="" width="200"></div>
</body>
</html>Das obige ist der detaillierte Inhalt vonCSS-feste Positionierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
