1.定位position
- 定位是一种更加高级的布局手段
- 单纯的用margin实现元素的移动，会显得很麻烦且笨拙，因此使用position属性改变元素的定位方式，从而更好的布局
- 通过定位可以将元素摆放到页面的任意位置
- 可选值
- static 默认值，元素是静止的没有开启定位
- relative：开启元素的相对定位
- absolute：开启元素的绝对定位
- fixed：开启元素的固定定位
- sticky：开启元素的黏性定位
1.1相对定位
postion：relative；
相对定位特点
- 开启相对定位后，如果不设置偏移量，元素不会发生任何变化
- 相对定位是参照于元素在文档流中的位置进行定位的
- 相对定位会提升元素的层级
- 不会脱离文档流
- 不会改变元素的性质，块还是块，行内还是行内
- 相当于灵魂出窍
偏移量
当元素开启了相对定位以后，可以通过偏移量来设置元素的位置
- top ：定位元素和定位位置上边的距离
- bottom：定位元素和定位位置下边的距离
- 定位元素垂直方向的位置由top和bottom两个属性来控制
- 通常情况下我们会使用其中之一
- left：同理
- right：同理
- 相对定位一般是结合绝对定位一起使用
1.2绝对定位（用的最多）
postion：absolute；
绝对定位特点
- 开启绝对定位后，如果不设置偏移量，元素的位置不发生变化
- 开启绝对定位后，元素会从文档流中脱离
- 绝对定位会改变元素的性质，行内-->块，块的宽高被内容撑开（内容有多大就有多大）
- 绝对定位回事元素提升一个层级
- 绝对元素是相对于包含块进行定位的
包含块
- 正常情况下，包含块就是离当前元素最低的祖先块元素
- 绝对定位的包含块：
- 包含块就是离他最近的开启了定位的祖先元素
- 如果所有的祖先元素都没有开启定位，则相对于根元素进行定位html，所以html除了根元素还叫初始包含块
1.3固定定位
position：fixed
- 固定定位是特殊的绝对定位
- 唯一不同的是固定定位永远参照于浏览器的视口（和html根元素类似，但不是）进行定位
- 作用：用来做工具栏、目录栏等不会跟随浏览器滚动条滚动的效果
浏览器的视口
浏览器的可视窗口，只针对浏览器视口
- 和根元素的区别
- 根元素html是针对网页的，当网页向下拖动会消失
- 可视窗口：针对浏览器窗口，向下移动滚动条不会变
1.4 粘滞定位
position：sticky
- 当元素固定到某一个位置的时候就不动了
- 粘稠定位和相对定位的特点基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定
- 相对于包含块，一般是相对于body
1.5绝对定位元素的位置
- 水平布局的宽度计算
- 之前
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 包含块的内容区宽度 - 开启绝对定位后，水平方向的布局等式就要添加left和right两个值，此时规则和之前一样只是多加了两个值
left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right = 包含块的内容区宽度- 当发生过渡约束后，如果9个值没有auto，则自动调整right值以使等式满足
- 如果有auto，则自动调整auto的值以使等式满足
- 可以设置auto的值：margin、width、left、right
-因为left和right的默认值是auto，所以如果不知道left和right，则等式不满足是，会自动调整这两个值
- 之前
- 垂直布局的宽度计算
top+margin-top/bottom+padding-top/bottom+border-top/bottom+height = 包含块的内容高度
-实现垂直居中
设置父元素position为relative，那么会相对于父元素居中，而如果父元素不加，则会相对于body居中
<style>
.box1{
500px;
500px;
position:relative;
background-color:pink:
}
.box2{
100px;
height: 100px;
background-color:orange;
position:absolute;
margin:auto;
left:0;
right:0;
top:0;
boottm:0;
}
</style>