如何在 v-col 中装箱一个绝对的 v-overlay？
How to have an absolute v-overlay boxed inside a v-col?
当在 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 （您可以在代码笔中取消注释以查看区别）
当在 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 （您可以在代码笔中取消注释以查看区别）