一、固定定位
固定定位可以通过 postion: fixed 来实现，设置固定定位的元素会脱离标准流。
不同于相对定位参考元素自己原来的位置，固定定位移动参考的是对象是视口（viewport），即原点就是浏览器的窗口。
也可以通过 top/right/bottom/left 来调整位置，并且 top/right 不能同时使用；bottom/left 不能同时使用。
设置了固定定位后，当画布滚动时该元素会固定不动。
创建 HTML 页面，使用固定定位la定位元素，具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.text {
position: fixed;
}
</style>
</head>
<body>
<span>我是span</span>
<strong class="text">固定定位元素</strong>
<img src="../images/juejin.png" alt="">
<div>我是div</div>
</body>
</html>
在浏览器中打开 HTML 页面，具体效果如下：
可以看到设置固定定位的元素已经脱离了标准流，我们可以给该元素设置一个偏移量，具体代码如下：
.strong {
position: fixed;
left: 0;
top: 0;
}
刷新页面，效果如下：
也可以将该元素设置到右下角的位置，具体代码如下：
.text {
position: fixed;
right: 0px;
bottom: 30px;
}
刷新页面，效果如下：
这里的 left\right 都是是相对于浏览器的可视区域；如果页面包含滚动条，在滑动滚动条的情况下固定定位元素然后是可以显示在视图中固定的位置的，在页面中添加多个 <br> 元素，具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.text {
position: fixed;
right: 0px;
bottom: 30px;
}
</style>
</head>
<body>
<span>我是span</span>
<strong class="text">固定定位元素</strong>
<img src="../images/juejin.png" alt="">
<div>我是div</div>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
</body>
</html>
在浏览器中打开页面，效果如下：
滑动滚动条的时候，固定定位元素的位置是固定的，相对可视区区域固定的。
使用固定定位的场景非常多，比如浏览器的侧边栏，顶部导航栏等。
画布和视口
视口（Viewport） 指的是文档的可视区域，如下图中的红框所示内容；画布（Canvas）用于渲染文档的区域，画布 >= 视口；文档超内容超出视口范围，可以通过滚动查看，画布的区域如下图中黑框所示：
固定定位元素的特点
- 脱离文档流，会对后面兄弟元素、父元素有影响。
left不能和right一起设置，top和bottom不能一起设置。- 固定定位和浮动不能同时设置，如果同时设置，浮动失效，以固定定位为主。
- 固定定位的元素，也能通过margin调整位置，但不推荐这样做。
- 无论是什么元素（行内、行内块、块级）设置为固定定位之后，都变成了定位元素。
