如何基于元素2定位元素1且不影响其位置？CSS仪表板布局问题

我正在搭建一个包含两个区域的仪表板：第一个是居中显示的仪表盘区域，第二个是展示用户ID并支持应用导航的信息控制区域。我希望将信息控制区域置于仪表盘左侧，但不想让仪表盘偏离页面中心，请问CSS中是否有内置方法实现该布局？

预期效果示意图：

当前代码片段：

.both_sections {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.dashboard_section {
  background-color: rgb(226, 245, 240);
  min-width: 300px;
  height: 250px;
  border: 2px solid black;
  border-radius: 10px;
}

.information_section {
  background-color: rgb(226, 245, 240);
  min-width: 100px;
  height: 120px;
  border: 2px solid black;
  border-radius: 10px;
  margin-left: 10px;
}

<div class="both_sections">
  <div class="dashboard_section"></div>
  <div class="information_section"></div>
</div>

请问如何修改上述代码以实现预期布局？

可以通过CSS Flexbox或Grid布局实现需求，以下是两种实用方案：

方案一：Flexbox + 负margin（快速实现） #

核心思路是让仪表盘保持居中，通过负margin将信息区域偏移到它的左侧：

1. 调整HTML结构，将信息区域放在仪表盘之前
2. 修改CSS设置负右侧外边距，同时确保信息区域层级不被遮挡

.both_sections {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.dashboard_section {
  background-color: rgb(226, 245, 240);
  min-width: 300px;
  height: 250px;
  border: 2px solid black;
  border-radius: 10px;
}

.information_section {
  background-color: rgb(226, 245, 240);
  min-width: 100px;
  height: 120px;
  border: 2px solid black;
  border-radius: 10px;
  /* 负margin值 = 信息区域宽度 + 间距，让区域偏移到仪表盘左侧 */
  margin-right: calc(-100% - 10px);
  /* 确保信息区域在仪表盘上方显示 */
  z-index: 1;
}

<div class="both_sections">
  <div class="information_section"></div>
  <div class="dashboard_section"></div>
</div>

方案二：Grid布局（逻辑更清晰） #

通过Grid列布局直接固定仪表盘和信息区域的位置，天然实现居中+左侧附加区域的效果：

.both_sections {
  display: grid;
  /* 定义三列：左列匹配信息区域宽度，中列匹配仪表盘宽度，右列占位平衡布局 */
  grid-template-columns: 100px 300px 100px;
  /* 让整个Grid容器在页面居中 */
  justify-content: center;
}

.dashboard_section {
  background-color: rgb(226, 245, 240);
  height: 250px;
  border: 2px solid black;
  border-radius: 10px;
  /* 固定在中间列 */
  grid-column: 2;
}

.information_section {
  background-color: rgb(226, 245, 240);
  height: 120px;
  border: 2px solid black;
  border-radius: 10px;
  /* 放在左列，垂直居中对齐仪表盘 */
  grid-column: 1;
  align-self: center;
  margin-right: 10px;
}

HTML结构无需调整，保持原顺序也可正常生效。

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