求助：基于Mantine v4.2实现模态框下方隐藏Shelf的布局定位

针对你描述的布局需求，以下是基于CSS的核心定位方案，适配模态框内容高度未知的场景：

核心思路 #

• 隐藏状态：置物架（shelf）位于模态框（content）后方，与content垂直居中对齐，且shelf右侧与content边缘重合
• 展开状态：content左移，shelf显示在content右侧，两者组成的整体在视口中水平+垂直居中

实现代码 #

基础HTML结构 #

<div class="modal">
  <div class="modal-content">
    <!-- 模态框内容，高度由内部元素决定 -->
  </div>
  <div class="modal-shelf">
    <!-- 置物架内容 -->
  </div>
</div>

CSS样式（含过渡动画） #

/* 定义可复用变量，也可通过JS动态赋值 */
:root {
  --modal-content-width: 400px; /* 模态框宽度，可根据实际调整 */
  --modal-shelf-width: 300px;  /* 置物架宽度 */
  --transition-speed: 0.3s;
}

/* 模态框容器：占满视口，负责整体垂直居中 */
.modal {
  position: fixed;
  inset: 0; /* 等价于 top/right/bottom/left: 0 */
  display: flex;
  align-items: center; /* 垂直居中内部元素，适配未知高度 */
  justify-content: center; /* 默认居中模态框内容 */
}

/* 模态框内容：核心视觉层 */
.modal-content {
  position: relative;
  width: var(--modal-content-width);
  background: #ffffff;
  padding: 2rem;
  z-index: 2; /* 确保在置物架上方 */
  transition: transform var(--transition-speed) ease;
  /* 高度由内部内容自动撑开，无需固定值 */
}

/* 置物架：隐藏状态 */
.modal-shelf {
  position: absolute;
  width: var(--modal-shelf-width);
  height: 100%; /* 与模态框内容高度保持一致 */
  background: #f5f5f5;
  z-index: 1; /* 位于模态框内容后方 */
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-speed) ease;
  /* 定位：右侧与模态框内容边缘对齐，垂直居中 */
  right: calc(50% + var(--modal-content-width)/2);
  top: 50%;
  transform: translateY(-50%);
}

/* 置物架展开状态：通过给容器添加类触发 */
.modal--shelf-open .modal-shelf {
  opacity: 1;
  visibility: visible;
  position: static; /* 转为静态定位，参与flex布局 */
  transform: none;
}

.modal--shelf-open .modal-content {
  /* 左移置物架宽度的一半，使模态框+置物架整体居中 */
  transform: translateX(calc(-1 * var(--modal-shelf-width)/2));
}

关键细节说明 #

1. 适配未知高度：通过flex的align-items: center实现垂直居中，无需依赖固定高度或硬编码的偏移值，自动适配模态框内容的动态高度
2. 动态宽度处理：若模态框宽度是动态的（比如响应式场景），建议通过JS获取modal-content的实际宽度后，动态更新--modal-content-width变量，确保定位精准
3. 过渡动画：所有状态切换都添加了过渡效果，保证交互流畅性
4. 层级控制：通过z-index确保隐藏时置物架在模态框后方，展开时正常显示

内容的提问来源于stack exchange，提问作者Bar Bokovza