定位的四种模式:static,relative,absolute,fixed
定位的四个位置:left,right,top,bottom
定位属性:position,有四种状态值
1.static:静态定位,按元素在文档流中的顺序排列,这是默认值,四个位置无效
2.relative:相对定位,元素相对于原来它在文档流中的位置进行定位,四个位置有效
立即学习“前端免费学习笔记（深入）”；
3.absolute:绝对定位,元素相对于它的定位父级定位,脱离文档流,四个位置有效
4.fixed:固定定位,与绝对定位类类似,也脱离了文档流,元素在页面上的位置固定,不随页面滚动,四个位置有效
<!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>以上就是css固定定位的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
209
收藏
