Four modes of positioning: static, relative, absolute, fixed
Four positions of positioning: left, right, top, bottom
Positioning attribute: position, there are four states Value
1.static: Static positioning, arranged in the order of elements in the document flow, this is the default value, the four positions are invalid
2.relative: Relative positioning, the element is relative to the original It is positioned in the document flow, four positions are valid
3.absolute: Absolute positioning, the element is positioned relative to its positioning parent, out of the document flow, four positions are valid
4.fixed: Fixed positioning, similar to the absolute positioning class, is also separated from the document flow. The position of the element on the page is fixed and does not scroll with the page. Four positions are valid
<!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>The above is the detailed content of css fixed positioning. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
