本文讲解如何通过 css 绝对定位，将子元素 `.div4` 精确放置在父容器 `.div1` 的右上角区域，解决 `margin: auto` 或 `float` 无效的问题，并强调 `position: relative` 与 `absolute` 的配合要点。
要让 .div4 稳定地定位在 .div1 的右侧（例如紧贴右边缘、垂直居中或顶部对齐），关键在于建立正确的定位上下文：.div1 必须设置 position: relative（你已正确设置），而 .div4 需启用 position: absolute，使其脱离文档流并相对于 .div1 进行偏移。
你原代码中 .div4 缺少 position: absolute，导致 margin-left: auto 和 margin-right: 0 在非 flex/inline-block 场景下无法实现“右对齐”效果；float 失效则是因为父容器未触发 BFC 或存在其他浮动干扰；position: fixed 会让元素相对于视口定位，脱离 .div1，自然不符合需求。
✅ 正确做法如下：
.div4 {
background-color: #BDE2FE;
width: 100px;
height: 450px;
position: absolute; /* 关键：启用绝对定位 */
right: 30px; /* 距离 .div1 右边缘 30px（预留 margin）*/
top: 30px; /* 距离 .div1 上边缘 30px（匹配其他子元素的 margin）*/
}⚠️ 注意事项：
- .div1 的 position: relative 是绝对定位生效的前提——没有它，.div4 会向上逐级查找最近的定位祖先，甚至回退到 ，造成错位；
- right: 0 会使 .div4 紧贴 .div1 最右边界，但若 .div1 自身有 margin（如你的 30px），建议显式设置 right: 30px 以对齐视觉边界；
- 若需垂直居中，可改用 top: 50%; transform: translateY(-50%);；
- 绝对定位元素不占据文档流空间，.div2 和 .div3 不会自动避开 .div4，如有重叠需手动调整 z-index 或布局逻辑。
总结：右对齐 ≠ float: right 或 margin: auto，而是「相对定位父容器 + 绝对定位子元素 + 方向偏移」三者协同的结果。掌握这一模式，可灵活实现侧边栏、悬浮按钮、装饰条等常见 UI 布局。
