定位有哪些？区别和特点？
静态定位 static
特点：默认文档流定位 --- position: static;
相对定位 relative
特点：相对于自身在浏览器中的默认位置
不脱离文档流 使用top,right,bottom,left来控制
注意点：
相对定位是不脱离标准流的, 会继续在标准流中占用一份空间
在相对定位中同一个方向上的定位属性只能使用一个
由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素
由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位 的元素设置margin/padding等属性的时会影响到标准流的布局
绝对定位 absolute
特点：
1.规律 默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点
2.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流 的那个祖先元素作为参考点。
2.1只要是这个绝对定位元素的祖先元素都可以
2.2指的定位流是指绝对定位/相对定位/固定定位
2.3定位流中只有静态定位不行
3.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 而且祖先元素中有多个元素都是定位流, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点。
注意点：
- 绝对定位的元素是脱离标准流的
- 绝对定位的元素是不区分块级元素/行内元素/行内块级元素
- 如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点
- 一个绝对定位的元素会忽略祖先元素的padding
-绝对定位 - 子绝父相：
相对定位弊端: 相对定位不会脱离标准流, 会继续在标准流中占用一份空间, 所以不利于布局界面 绝对定位弊端: 默认情况下绝对定位的元素会以body作为参考点, 所以会随着浏览器的宽度高度的变化而变化
子绝父相 ： 子元素用绝对定位, 父元素用相对定位
-绝对定位 - 水平居中:
只需要设置绝对定位元素的 left:50%;
然后再设置绝对定位元素的 margin-left: -元素宽度的一半px;
固定定位 fixed
作用：背景定位可以让背景图片不随着滚动条的滚动而滚动,
而固定定位可以让某个盒子不随着滚动条的滚动而滚动。
注意点：
1.脱离文档流 相对于浏览器视口区域
2.和绝对定位一样不区分行内/块级/行内块
粘滞定位 sticky
特点：1.不脱离文档流，仍然保留元素原本在文档流中的位置。
2.结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位
3.元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
作用：在做网页侧边栏时我们可以用粘滞定位
如果设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上
使用条件：
- 父元素不能overflow:hidden或者overflow:auto属性。
- 必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
- 父元素的高度不能低于sticky元素的高度
- sticky元素仅在其父元素内生效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
width: 1200px;
margin: 0 auto;
}
.container>div{
height: 300px;
}
.container>div:nth-child(odd){
background-color: antiquewhite;
}
.container>div:nth-child(even){
background-color: lightyellow;
}
/* 设置左侧侧边栏样式 */
.left{
width: 100px;
height: 500px;
margin-left: 10px;
background-color: lightpink;
/* 设置粘滞定位 */
position: sticky;
toP: 50px;
}
/* 设置右侧侧边栏样式 */
.right{
width: 100px;
height: 500px;
background-color: lightskyblue;
float: right;
/* 设置粘滞定位
不脱离文档流 原先位置保留
*/
position: sticky;
toP: 50px;
}
</style>
</head>
<body>
<div class="container">
<div></div>
<div></div>
<!-- 设置右侧侧边栏 -->
<aside class="right"></aside>
<!-- 设置左侧侧边栏 -->
<aside class="left"></aside>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html> 
向下滚动到一定距离侧边栏便固定在一定位置：
