排查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
