记录那个项目 css sticky有效果的方法

0. z-index是相对父级来说的 不是整个项目

1.要sticky的元素 html

  <div class="sticky">
    <button mat-flat-button color="primary" class="small ml-1">
      <mat-icon>search</mat-icon>
      搜索
    </button>
  </div>

css

.sticky {
  position: sticky;
  top:0;
  z-index:2;//那个项目设了才看得到
}

2.sticky元素的父级元素的样式

一定要设置高度，不设置我的项目没效果

/* 搜索悬浮实现 - 创建滚动容器*/
.sticky-container {
  height:calc(100vh - 70px); 
}

mdn文档说sticky元素的父级元素不能有overflow:auto等样式，但我加了居然还可以用，就很