position: sticky失效?

作者站长头像
站长
· 阅读数 16
<template>
  <div id="app">
    <div style="height: 100px; overflow: auto">
      <div style="position: sticky; top: 0">toutou</div>
      <div>
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
      </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 prop="label" label="label" width="width">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      data: [
        {
          label: "文字"
        },
        {
          label: "文字"
        },
        {
          label: "文字"
        },
        {
          label: "文字"
        },
        {
          label: "文字"
        },
        {
          label: "文字"
        },
        {
          label: "文字"
        },
        {
          label: "文字"
        },
        {
          label: "文字"
        },
        {
          label: "文字"
        },
        {
          label: "文字"
        },
        {
          label: "文字"
        },
        {
          label: "文字"
        },
        {
          label: "文字"
        },
        {
          label: "文字"
        },
        {
          label: "文字"
        },
        {
          label: "文字"
        },
        {
          label: "文字"
        },
        {
          label: "文字"
        },
        {
          label: "文字"
        },
        {
          label: "文字"
        },
        {
          label: "文字"
        },
        {
          label: "文字"
        },
        {
          label: "文字"
        },
        {
          label: "文字"
        }
      ]
    };
  },
  methods: {}
};
</script>

下面那个position: sticky失效了

回复
1个回答
avatar
test
2024-06-27

没有失效, 是因为层级低被表格盖住了answer image.el-table是加了position: relative;样式, 并且在下面导致层级高于toutouanswer image

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容