CSS中的position定位

position：absolute

• 绝对定位，绝对定位会改变元素的性质，行内变块，块的高度被内容撑开
• 开启绝对定位后，元素会从文档流脱离
• 绝对定位是相对其包含块进行定位的。
• 绝对定位会使元素提升一个层级。
• 绝对定位的包含块：离他最近的开启了定位的祖先元素，如果所有祖先元素都没有开启定位，则HTML跟元素就是它的包含块。

position：relative

• 相对定位，相对定位不会改变元素的性质，块还是块，行内还是行内
• 开启相对定位后，不会使元素脱离文档流
• 相对定位是参照于元素自身在文档流中的位置进行定位的
• 相对定位会提升元素的层级

position：fixed

• 固定定位，固定定位会改变元素的性质，行内变块，块的高度被内容撑开
• 开启固定定位后，元素会从文档流脱离
• 固定定位永远参照于浏览器的视口进行定位，不会随网页的滚动条滚动
• 固定定位会使元素提升一个层级

position：sticky

• 粘滞定位， 与相对定位的特点基本一致
• 不同的是粘滞定位可以在元素到达某个位置时，将其固定

例子：当.nav滚动到离top50px距离的时候，就不会动了

.nav {
  height: 48px;
  width: 1300px;
  margin: 100px auto;
  positon: sticky;
  top: 50px;