背景图片超过容器的高度不能完全展示？

Question

环境 vue3+vant4
设计图：
实现：

右上角图片的位置超过容器的高，展示不全

我用的是vant里面的<van-popup 组件

<van-popup v-model:show="showModal" position="bottom" class="container_pop">
    <div class="container">
...我的其他代码内容
    </div>
</van-popup>

.container {
  width: 100%;
  height: 461px;
  background: url('@/assets/patientDetail/bg.png');
  background-size: cover; /* 背景图片覆盖整个div */
  background-position: center; /* 背景图片居中 */
  background-repeat: no-repeat;
  padding: 16px 16px 8px 16px;
  position: relative;
  &::before{
    content: "";
    position: absolute;
    top: -51px;
    bottom: 0;
    left: 195px;
    right: 0;
    background-image: url('@/assets/patientDetail/logo.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 180px;
    height: 156px;
  }

container有背景图片，给他设置了宽高，又用伪类的方法把目标图片放到container上，但是并不能完全展示，请问各位有没有什么好的办法

Answer 1

.van-popup 有一个 overflow-y:auto 的属性，会导致内部绝对定位的元素超出隐藏。

.van-popup {
  box-sizing: border-box;
  background: var(--van-popup-background);
  transition: var(--van-popup-transition);
  -webkit-overflow-scrolling: touch;
  max-height: 100%;
  position: fixed;
  overflow-y: auto; // 👈
}

你内部已经有一个 .container 的容器了，完全可以把 .van-popup 的 overflow-y 修改成 visible。也就是给你的 .container_pop 类上设置 overflow-y:visible

Answer 2

应该是哪里设置了溢出隐藏
1、重置掉溢出隐藏的设置
2、两个背景图都整体下移，弹出框上方使用padding等进行留白

Answer 3

那说明那个 van-popup 极有可能里面有 overflow 或者 transform 之类的属性，然后你的内容超过就截断了。

如果必须要用这个 van-popup 组件的话，那么就给内容部分加上 padding-top 预留超出的部分，让整个内容整体下来点。比如：

.container {
    padding-top: 51px;
}