CSS实现：将DIV容器固定在居中容器右侧

我已经给网页主内容设置了如下容器样式：

#main { width: 50%; margin: 0 auto; }

现在需要在#main容器的顶部右侧添加一个固定定位的容器，效果为该容器始终固定在主容器的顶部右侧位置，不会随页面滚动偏移。

实现方案 #

可以通过给右侧固定容器设置position: fixed，再结合calc()计算其水平位置，使其对齐主容器的右侧：

1. HTML结构示例：

<div id="main">
  <!-- 主内容区域 -->
</div>
<div id="fixed-box">
  <!-- 固定容器内容 -->
</div>

2. CSS样式设置：

#main {
  width: 50%;
  margin: 0 auto;
  /* 可选：添加上内边距，避免固定容器遮挡主内容顶部 */
  padding-top: 70px;
}

#fixed-box {
  position: fixed;
  top: 15px; /* 距离页面顶部的距离可自行调整 */
  /* 计算水平位置：屏幕中线 + 主容器宽度的一半，刚好对齐主容器右侧 */
  left: calc(50% + 25%);
  width: 130px; /* 固定容器宽度按需调整 */
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 12px;
}

补充说明 #

• 若主容器为固定宽度（比如width: 900px），则水平位置可直接写为left: calc(50% + 450px)，计算逻辑保持一致。
• padding-top的数值可根据固定容器的实际高度调整，确保主内容不被遮挡。

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