CSS如何让子元素在父div外侧显示并定位在父级右侧10px处

问题根因 #

• 给目标蓝色div设置position: relative时，relative定位的偏移参照是元素自身原本在文档流中的位置，既不会让元素脱离父容器内部的排版约束，也无法以父容器边界作为定位参考，无法实现“跑到父容器外侧、按父容器位置偏移”的目标。
• 直接给蓝色div设置position: absolute却未给父级配置定位属性时，绝对定位元素会沿DOM树向上寻找最近的非static定位祖先作为参照；如果遍历到最外层根元素仍未找到有效参照，就会出现以视口为定位基准的错位问题。

实现步骤 #

需同时完成两处CSS调整，即可达成全部需求：

1. 为父容器#main配置定位上下文
   给#main添加position: relative属性，无需设置任何偏移值。该操作会让#main成为内部绝对定位元素的固定参照边界，从根源上避免定位元素参照视口的错位问题。
2. 为目标蓝色div配置定位规则
   给#myBlueDiv添加以下样式：
   • position: absolute：让元素脱离父容器内部的flex排版流，不再受父容器内部空间约束，可显示在父容器边界外侧
   • top: 0：让元素纵向与父容器顶部对齐，消除纵向位置偏差
   • left: calc(100% + 10px)：元素左边缘与父容器左边缘的总距离为「父容器自身宽度 + 10px」，精准落在父容器右侧外侧10px的位置

补全后的CSS代码 #

#main {
  width: 100px;
  height: 50px;
  border: 1px solid black;
  display: flex;
  /* 新增：建立定位上下文 */
  position: relative;
}

#myBlueDiv {
  /* 新增：脱离文档流实现跨边界显示 */
  position: absolute;
  /* 新增：纵向对齐父容器顶部 */
  top: 0;
  /* 新增：定位到父容器右侧外10px */
  left: calc(100% + 10px);
}

效果说明 #

• 父容器#main默认的overflow属性为visible，延伸到外侧的蓝色元素不会被父容器边界裁剪，完全满足“不被父容器边界限制显示”的要求。
• 该实现不会改动原有HTML结构，也不会破坏父容器内部原有的flex排版逻辑，左侧红色div的显示位置不会发生任何偏移。

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