gpt4 book ai didi

css - 如何在 v-col 中装箱一个绝对的 v-overlay?

转载 作者:行者123 更新时间:2023-12-01 21:34:50 25 4
gpt4 key购买 nike

当在 v-col 中使用绝对 v-overlay 时,覆盖覆盖其所有祖父 v-row 而不是只是它的父 v-col

"absolute overlays are positioned absolutely and contained inside of their parent element."

-Vuetify's documentation

这是一个 demo on codepen

最佳答案

发生这种情况是因为默认情况下元素的位置值为 static,而在 CSS 中有这样的规则:

absolutely positioned elements are positioned relative to its nearest positioned ancestor (i.e., the nearest ancestor that is not static).

Source: mdn

在我们的例子中,位置最近的祖先是 v-row。要解决这个问题,只需将 position: relative; 添加到父级 v-col(您可以在代码笔中取消注释以查看区别)

关于css - 如何在 v-col 中装箱一个绝对的 v-overlay?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62089501/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com