CSS之㉒固定定位以及简提粘性定位·总结

                         QQ:3020889729                                                                                 小蔡

固定定位（position: fixed;）

固定定位特性

• 脱标，不占原来的位置
• 不随滑动条移动——根据当前可见框实时定位
• 定位基准——浏览器可见框

css例子代码：

* {
  /*将默认边距清除 */
  margin: 0px;
  padding: 0px;
  /* 将定位属性提前置零 */
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
}

.nav {
  position: fixed;
  left: 80%;
  top: 60px;
  height: 40px;
  width: 150px;
  background-color: skyblue;
  color: red;
  text-align: center;
}

效果：

粘性定位 （position: sticky;）

粘性定位特性

• 包含相对定位的性质，它是不脱标的，占有原来的位置
• 它是可以根据显示框为基准进行定位的——这里是通过，拉动滑动条，当定位盒子与浏览器可见狂距离等到于粘性定位设置的边偏移值时，开始固定在当前可见框位置，不再随滑动条移动

代码：

* {
  /*将默认边距清除 */
  margin: 0px;
  padding: 0px;
  /* 将定位属性提前置零 */
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
}

.nav {
  position: sticky;
  top: 20px;
  left: 45%;
  margin-top: 200px;
  height: 40px;
  width: 150px;
  background-color: skyblue;
  color: red;
  text-align: center;
}

效果：