shape-outside 仅对 float 元素生效，对 position: absolute 等脱离文档流的元素无效；需用隐藏的 float 元素配合 absolute 元素实现绕形布局，且 polygon 坐标须严格在 float 元素盒内。
不能直接结合。shape-outside 对 position: absolute 元素完全无效——它只作用于 float 元素，这是规范硬性限制，不是兼容性问题。
为什么 shape-outside 不响应 absolute 定位
浏览器渲染时，shape-outside 的计算依赖浮动上下文（float context）：只有参与块级浮动流的元素，其周围内联内容（如段落文字）才会按该形状重新排布行框（line boxes）。而 position: absolute 元素脱离文档流，不产生浮动上下文，也不影响周围文字的布局逻辑，因此 shape-outside 被忽略，连 warning 都不会报。
- 检查 DevTools 中该元素的 computed 样式，
shape-outside会显示为none（即使你写了） -
display: inline-block、position: fixed、display: table同样不触发shape-outside - 试图用
float: left+position: absolute混用？float 会被覆盖失效，形状依然不生效
想定位又想要文字绕形？分两步走
真正可行的方案是「视觉定位」和「布局绕形」分离：用 absolute 控制位置，用另一个同尺寸、同形状的 float 元素（透明/不可见）承担 shape-outside 职责。
- 给绝对定位的图片或 SVG 加
z-index: 2和pointer-events: none（避免遮挡文字点击） - 在同一父容器内紧邻放置一个
div，设float: left、相同width/height、shape-outside路径一致，但visibility: hidden或opacity: 0 - 确保该
float元素不带背景、边框、内容，否则可能意外撑开布局 - 父容器需有
position: relative，以约束absolute子元素的定位基准
polygon 坐标对齐 absolute 元素时的坑
当用 shape-outside: polygon(...) 模拟不规则轮廓，并希望它与上方 absolute 图片严丝合缝，坐标系容易错位：
-
polygon()坐标始终基于float元素自身的盒模型左上角（不是父容器，也不是absolute元素的位置） - 若
absolute元素用了top: 20px; left: 30px，而float元素没设margin，两者视觉位置就不重合 - 解决方法：让
float元素也通过margin-left/margin-top移动到相同偏移量，而不是靠absolute的top/left - 调试技巧：临时给
float元素加outline: 1px solid red，再叠一层半透background看 polygon 描点是否贴合预期轮廓
最易被忽略的一点：shape-outside 的路径必须严格落在 float 元素的宽高范围内；哪怕只是多写了一个像素的坐标，浏览器就可能放弃计算整个形状，退回到矩形环绕——这不是 bug，是规范要求的容错机制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
