postion的sticky粘性定位
粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位,之后为固定定位。
sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上(当该祖先的overflow是hidden、scroll、auto、overlay时),即便这个祖先不是最近的真实可滚动祖先。
/* 表头固定 */ thead tr th { position: sticky; top: 0; background: #F4F4F5; height: 30px; } /* 首列固定/最后一列固定*/ th:first-child, th:last-child, td:first-child, td:last-child { position: sticky; left: 0; background: #F4F4F5; text-align: center; right: 0px; border-left: 1px solid #DDDDDD ; width: 100px; } /* 表头首列和最后一列强制最顶层 */ th:last-child, th:first-child { z-index: 3; /*左上角单元格z-index,切记要设置,不然表格纵向横向滚动时会被该单元格右方或者下方的单元格遮挡*/ background: #F4F4F5; }