css定位: fixed和sticky

首先这两个定位都是在可视区固定一个dom元素, 但是有一个差距

就是fixed会脱离文档流, 而stick不会

上代码

.fixTop {
  z-index: 999;
  height:auto;
  position: fixed;
  top: 0;
  left: 0;
  .nav-bar {
    display:block
  }
}

固定定位是这样的 滑动到中间:

固定在顶部, 但是样式已经被改变了. 搭嘎, sticky不会

---

.fixTop {
  z-index: 999;
  height:auto;
  position: sticky;
  top: 0;
  left: 0;
  .nav-bar {
    display:block
  }
}

 

 

依旧是固定在顶部 滑动到中间也不会脱离文档流

当一个元素获取了position:fixed属性之后, 就会获得bfc. 元素有了bfc属性后,这个元素就可以看做是隔离了的独立容器,容器里面的元素不会影响外面的元素