css - 隐藏在 Quasar 中其他组件后面的粘性浮动操作按钮

Question

因此，我创建了简单的浮动操作按钮，并将其放置在页面的右上角。向下滚动时，按钮按预期粘在右上角，除非有另一个组件隐藏在其下方 - 有时在文本下方或卡片下方并且无法点击。

有没有办法让它粘在它经过的任何东西上？

在这里 - Codesandbox - 当您向下滚动时，您可以看到复制代码和按钮的行为。

标签： cssvue.jsquasar-framework

Answer 1

只需指定适当z-index的 toq-page-sticky元素即可解决问题。

<q-page-sticky position="top-right" :offset="[10, 10]" style="z-index: 3">

比使用 style 属性更好，创建一个类并在其中添加 CSS。问候。