排查position: sticky失效问题
本文分析一个position: sticky失效案例，并解释其原因。
问题：代码片段中，两个div元素都使用了position: sticky; top: 0;样式，分别嵌套在两个高度为100px、并设置了overflow: auto的父容器内。其中一个position: sticky失效了。
代码如下：
<template> <div id="app"> <div style="height: 100px; overflow: auto"> <div style="position: sticky; top: 0">toutou</div> <div></div> </div> <div style="height: 100px; overflow: auto"> <div style="position: sticky; top: 0">toutou</div> <el-table :data="data" style="width: 100%"> <el-table-column label="label" prop="label" width="width"></el-table-column> </el-table> </div> </div> </template> <script> export default { name: "App", data() { return { data: [/* 表格数据 */] }; } }; </script>
分析：position: sticky并非失效，而是被Element ui表格组件(el-table)遮挡。el-table组件默认设置了position: relative。由于相对定位的子元素会根据父元素进行渲染，导致el-table拥有更高的层级，覆盖了设置了position: sticky的div。因此，视觉上看起来失效，实际上它仍在工作，只是被遮盖了。
解决方案：调整层级关系，例如修改el-table的z-index或调整元素的层级顺序。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
