定位（position）简介：
定位是一种更加高级的布局手段，通过定位可以将元素摆到页面的任何位置
使用position属性来设置定位
- 可选项：
static 默认值， 元素是精致的，没有开启定位（只要不是static都是开启了）
relative 开启元素的相对定位
absolute 开启元素的绝对定位
fixed 开启元素的固定定位
sticky 开启元素的粘滞定位
- 相对定位：
- 当元素的position 属性值设置为relative时则开启了元素的相对定位
- 相对定位的特点：
1、元素开启相对定位以后，如果不设置偏移量元素就不会发生任何的变化
2、相对定位是参照于元素在文档流中的位置进行定位的
3、相对定位会提升元素的层级
4、相对定位不会使得元素脱离文档流
5、相对定位不会改变元素的性质，块还是块，行内还是行内
- 偏移量（offset）
-当元素开启了定位以后，可以通过设置偏移量元素来设置元素的位置
top : 定位元素和定位位置上边的距离
bottom： 定位元素和定位位置下边的距离，
1）定位元素垂直方向通常由top和bottom两个属性来控制，通常情况下我们只会使用其一
2）top 值越大，定位元素越往下移动
3）bottom值越大，定位元素越往上移动
4） left: 定位元素和定位位置的左侧距离
5）right: 定位元素和定位位置的右侧距离
定位元素水平方向的位置由left和right两个属性控制，通常情况下只会使用一个
left越大，元素越靠右
right越大，值越靠左
定位和margin最大的区别：margin会影响到其他元素布局，会把其他元素一起往下挤，偏移量不会，只会改变开启定位的元素的位置
注意： 偏移量只适用于定位元素，开启定位才可以设置偏移量
<!DOCTYPE html> <html > <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> .box1{ width: 100px; height: 100px; background-color: yellowgreen; position: relative; left: 100px; top: 100px; } </style> </head> <body> <div class="box1"></div> </body> </html>
box1向右移动100px,向下移动100px
- 绝对定位：
当元素position属性值设置为 absolute时，则开启了元素的绝对定位
绝对定位的特点：
1、开启绝对定位后，如果不设置偏移量元素的位置不会发生变化（说明元素的其他性质可能会变）
2、开启绝对定位后，元素会从文档流中脱离
3、绝对定位会改变元素的性质，行内变成块，块的宽度会被内容撑开
4、绝对定位会使元素提升一个层级
5、绝对定位是相对于其包含块进行定位的
包含块（containing block）：
1）正常情况下：
包含块就是离当前元素最近的祖先块元素（包括父元素）
2）绝对定位的包含块
包含块就是离它最近的开启了定位的祖先元素，如果所有的祖先元素都没有开启定位则根元素就是它的包含块
html（根元素，初始包含块）
下面代码，这时，box3以根元素为包含块，原始坐标为屏幕原点，向下移动20px
<style>
.box1{
width: 150px;
height: 150px;
background-color: yellowgreen;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
}
.box3{
width: 70px;
height: 70px;
background-color: violet;
position:absolute;
top: 20px;
left: 100px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box3"></div>
</div>
<div class="box2"></div>
<div class="box4"></div>
以父元素box1为包含块，box1向下移动300px,box2也跟随向下移动，top设置为0
<style>
.box1{
/* 给box1开启定位，于是box3以box1的原点为起始原点 */
position: relative;
top: 300px;
width: 150px;
height: 150px;
background-color: yellowgreen;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
}
.box3{
width: 70px;
height: 70px;
background-color: violet;
position:absolute;
/* 设置top为0px, 贴紧顶部 */
top:0px;
left: 100px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box3"></div>
</div>
<div class="box2"></div>
<div class="box4"></div>
效果如下：
-固定定位
将元素的position属性设置为fixed
固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样
唯一不同的是：固定定位永远参照浏览器的视口进行定位
固定定位不会随着网页的滚动条滚动，是固定在窗口的某个位置上
注意： 兼容性不好ie6不兼容
-粘滞定位
当元素position属性设置为sticky时则开启了元素的粘滞定位
粘滞定位和相对定位的特点基本一致，不同的是：
粘滞定位可以在元素达到某个位置时将其固定。
float和position: absolute的区别：
position: absolute会导致元素脱离文档流，被定位的元素等于在文档中不占据任何位置，在另一个层呈现，可以设置z-index。PS的图层效果就是position: absolute。
float也会导致元素脱离文档流，但还在文档或容器中占据位置，把文档流和其它float元素向左或向右挤，并可能导致换行。图片的文字环绕布局效果就是float。