## 事象
以下のようなソース。
```html
<script setup lang="ts">
defineProps<{
uploading: boolean;
src: string;
width: string;
height: string;
}>();
</script>
<template>
<div>
<img :src="src" :width="width" :height="height" />
<v-overlay
:model-value="uploading"
contained
class="justify-center align-center"
>
<v-progress-circular indeterminate />
</v-overlay>
</div>
</template>
```
> A contained overlay is positioned absolutely and contained inside its parent element.
とあるので `contained` を入れたが効果がなかった。
<div class="link-card">
<div class="link-card-header">
<img src="https://vuetifyjs.com/favicon.ico" class="link-card-site-icon"/>
<span class="link-card-site-name">Vuetify</span>
</div>
<div class="link-card-body">
<div class="link-card-content">
<p class="link-card-title">Overlay component — Vuetify</p>
<p class="link-card-description">The overlay component makes it easy to create a scrim over components or your entire application.</p>
</div>
<img src="https://cdn.vuetifyjs.com/docs/images/graphics/og-image.png" class="link-card-image" />
</div>
<a href="https://vuetifyjs.com/en/components/overlays/#contained"></a>
</div>
## 原因
親要素が `layout: relative` でないから。
[APIリファレンス](https://vuetifyjs.com/en/api/v-overlay/#links)にしれっと書いてある。
> Limits the size of the component and scrim to its offset parent. Implies absolute and attach. (Note: The parent element must have position: relative.).
## 解決方法
親要素に `layout: relative` を追加する。
```diff
<template>
- <div>
+ <div class="layout: relative">
<img :src="src" :width="width" :height="height" />
<v-overlay
:model-value="uploading"
contained
class="justify-center align-center"
>
<v-progress-circular indeterminate />
</v-overlay>
</div>
</template>
```