弹出层默认使用fixed，动画从视口计算，而非父容器

根据搜索结果，Vant 4 的 van-popup 组件：

默认挂载位置：弹出层默认挂载到组件标签所在位置，而不是 body。

但问题的关键在于：虽然默认挂载在组件标签位置，但 popup 内部使用的是 position: fixed 定位，所以动画仍然是相对于视口计算的，而非相对于父容器。

根据 CSDN 那篇文章提到的：通过控制台可以看出，popup 已经挂载上去了，但 popup 的样式为 position:fixed，这显然不合理。

所以解决方案就是我之前说的 —— 需要覆盖 position: fixed 为 position: absolute，并让父容器设置 position: relative + overflow: hidden：

<template>
  <div class="container">
    <van-popup
      v-model:show="show"
      position="bottom"
      :lock-scroll="false"
      :style="{ position: 'absolute' }"
      :overlay-style="{ position: 'absolute' }"
    >
      内容
    </van-popup>
  </div>
</template>

<style>
.container {
  position: relative;
  overflow: hidden;
  width: 375px;
  height: 667px;
}
</style>

核心就是把 fixed 改成 absolute，这样才能让 popup 从容器边界而非视口出现。

基本上是的。Vant 的 popup 组件在设计上就是为移动端全屏弹出场景设计的，内部硬编码了 position: fixed，没有提供属性来切换定位模式。

不过除了直接覆盖 CSS，还有几种变体方式：

1. 利用 transform 触发新的包含块

给父容器加 transform 会让 fixed 子元素相对于该容器定位（CSS 规范特性）：

<div class="container">
  <van-popup v-model:show="show" position="bottom">
    内容
  </van-popup>
</div>

<style>
.container {
  transform: translateZ(0); /* 关键：创建新的包含块 */
  width: 375px;
  height: 667px;
  overflow: hidden;
}
</style>

这样不用改 popup 的定位，但本质上是利用了 CSS 的副作用，算是个 hack。

2. 不用 van-popup，自己封装

如果你经常有这种需求，可以写个简单的容器内弹出组件：

<template>
  <Transition name="slide-up">
    <div v-if="show" class="local-popup" :class="position">
      <slot />
    </div>
  </Transition>
</template>

3. 换用 PC 端组件库

如果项目需要同时兼顾 PC/移动端，可以考虑用 Element Plus 或 Naive UI 的 Drawer 组件，它们对这种场景支持更好。

---

所以结论是：要让 Vant popup 在容器边界出现，必须以某种方式改变定位行为，官方没有提供配置项。transform 方案最简洁，一行 CSS 就能搞定。