Как получить абсолютный v-оверлей внутри v-col?

Question

Когда абсолютный v-overlay используется внутри v-col, наложение покрывает все его прародителя v-row, а не только его родительский v-col.

"позиционируются абсолютные наложения абсолютно и содержится внутри их родительского элемента. "

-Документация Vuetify

Вот демонстрация на codepen

Answer 1

Это происходит потому, что элементы по умолчанию имеют значение позиции static, а в CSS есть следующее правило:

абсолютно позиционированные элементы позиционируются относительно его ближайшего позиционированного предка (т.е. , ближайший предок, который не является stati c).

Источник: mdn

В нашем случае ближайший позиционированный предок - это v-row. Чтобы исправить это, нужно просто добавить position: relative; к родительскому v-col (вы можете раскомментировать это в коде, чтобы увидеть разницу)