如何实现左侧固定定位元素顶部对齐顶部固定元素底部且避免重叠？

当然可以搞定！而且完全不用写死像素边距，有几种优雅的方案，我给你拆解下：

方案1：CSS变量 + JavaScript（动态适配高度变化，推荐） #

这是最灵活的方案，能完美适配顶部div高度动态变化的场景（比如窗口缩放、内容更新、响应式布局），完全不需要硬编码任何数值。

步骤说明： #

1. 给两个div分别添加类名方便选择（也可以用id，类名更通用）
2. 用CSS自定义属性（变量）存储顶部div的高度
3. 把左侧div的top值绑定到这个变量
4. 用JavaScript初始化高度，再通过监听事件实时更新变量值

代码示例： #

HTML

<div class="top-header" style="position:fixed; left:0; top:0;right:0; background: #eee; padding: 1rem;">顶部导航栏</div>
<div class="sidebar" style="position:fixed; left:0; bottom:0; background: #ddd; width: 200px;">左侧侧边栏</div>

CSS

:root {
  /* 初始化变量，后续由JS动态更新 */
  --header-height: 0px;
}

.sidebar {
  /* 绑定顶部偏移量到变量 */
  top: var(--header-height);
}

JavaScript

const header = document.querySelector('.top-header');
const root = document.documentElement;

// 更新头部高度到CSS变量的函数
function updateHeaderHeight() {
  root.style.setProperty('--header-height', `${header.offsetHeight}px`);
}

// 初始化高度
updateHeaderHeight();

// 监听窗口大小变化，实时更新
window.addEventListener('resize', updateHeaderHeight);

// 监听头部自身尺寸变化（比如内容更新导致高度变化）
new ResizeObserver(updateHeaderHeight).observe(header);

这个方案的优势在于：不管顶部div的高度怎么变（比如添加了新内容、字体大小调整），左侧div都会自动对齐到顶部div的底部，完全不用手动修改数值。

方案2：纯CSS（仅适用于顶部高度固定的场景） #

如果你的顶部div高度是固定的（比如用rem、em或视口单位定义，不是动态内容），可以用calc()直接计算顶部偏移量，这也不算硬编码像素值：

.top-header {
  height: 4rem; /* 固定相对高度 */
}

.sidebar {
  top: calc(4rem);
}

注意：这个方案局限性很大，一旦顶部div高度需要动态调整，就会失效，所以只适合高度固定的简单场景。

方案3：调整HTML结构（纯CSS实现，无需JS） #

如果允许修改HTML结构，可以把两个元素放到同一个fixed定位的容器里，利用Flexbox垂直布局自动分配空间：

<div class="fixed-container" style="position:fixed; left:0; top:0; bottom:0; width:200px; display: flex; flex-direction: column;">
  <div class="top-header" style="background: #eee; padding:1rem;">顶部导航栏</div>
  <div class="sidebar" style="background: #ddd; flex: 1;">左侧侧边栏</div>
</div>

这个方法完全不需要JS，靠Flexbox自动让侧边栏占据容器剩余空间，自然对齐到顶部div的底部。但前提是你能调整现有HTML结构。

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