如何使position:fixed表单与position:relative父div同宽？

position: fixed元素会脱离文档流，无法继承其position: relative父容器的动态宽度（仅已知父容器max-width），常规CSS属性如width: inherit、width: 100%无法解决这个问题。以下是基于原生JS的实现方案，无需依赖jQuery或position: sticky。

核心思路 #

• 当触发表单显示时，获取relative父容器的实际渲染宽度
• 将该宽度赋值给fixed定位的表单
• 监听窗口resize事件，实时同步宽度以适配父容器的动态变化

完整代码示例 #

HTML

<div class="relative">
  <button id="openFormBtn">打开表单</button>
  <div class="absolute">
    <form class="fixed" id="fixedForm"></form>
  </div>
</div>

CSS

.relative {
  position: relative;
  background-color: red;
  max-width: 1200px;
  height: 150vh;
  margin: 0 auto; /* 父容器居中，体现动态宽度特性 */
}

.absolute {
  position: absolute;
  background-color: blue;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: inherit;
}

.fixed {
  position: fixed;
  background-color: green;
  height: 50px;
  z-index: 5;
  display: none; /* 默认隐藏表单 */
  top: 20px;
}

#openFormBtn {
  position: relative;
  z-index: 10;
  margin: 20px;
}

原生JS

const openBtn = document.getElementById('openFormBtn');
const fixedForm = document.getElementById('fixedForm');
const relativeContainer = document.querySelector('.relative');

// 同步表单宽度与父容器宽度
function syncFormDimensions() {
  const containerRect = relativeContainer.getBoundingClientRect();
  // 设置表单宽度与父容器一致
  fixedForm.style.width = `${containerRect.width}px`;
  // 设置表单左侧位置与父容器对齐
  fixedForm.style.left = `${containerRect.left}px`;
}

// 点击按钮显示表单并同步尺寸
openBtn.addEventListener('click', () => {
  fixedForm.style.display = 'block';
  syncFormDimensions();
});

// 窗口大小变化时实时同步
window.addEventListener('resize', syncFormDimensions);

关键细节说明 #

• 使用getBoundingClientRect()可以同时获取父容器的宽度和相对于视口的位置，确保表单不仅宽度一致，还能和父容器左对齐
• 若不需要对齐位置，仅需宽度同步，可单独使用relativeContainer.offsetWidth或clientWidth
• 监听resize事件保证父容器宽度因窗口缩放变化时，表单宽度能实时更新

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