包含块判定导致定位跑偏怎么解决
通过显式设置父级元素的 position 为 relative、absolute 或 fixed，可以强制子元素基于该父级进行定位，从而修正因默认包含块（通常是 body）导致的偏移。如果父级没有定位属性，子元素的 top 和 left 值会相对于初始包含块计算，这往往造成视觉上的错位。
哪些CSS属性会影响包含块的生成
transform、perspective、filter 和 will-change 等属性会创建新的包含块上下文，导致原本预期的相对定位失效。这些属性虽然不改变布局流，但会改变定位参考系，使子元素脱离原来的父级约束。
使用transform后如何恢复原有定位行为
当父级应用了 transform 后，若需保持子元素相对于原始父级的定位，可引入一个中间层。将 transform 应用在更外层的容器上，而让直接父级仅负责定位，这样能隔离变换对包含块判定的影响，确保子元素坐标计算符合预期。
立即学习“前端免费学习笔记（深入）”；
digraph G {
rankdir=LR;
node [shape=box, style=filled, fillcolor="#e1f5fe", fontname="Arial", fontsize=16];
edge [fontname="Arial", fontsize=16];
body [label="body\n(Initial CB)", fillcolor="#fff9c4"];
parent [label="parent\n(position: static)"];
child [label="child\n(position: absolute)"];
body -> parent [label="contains"];
parent -> child [label="CB is body"];
}
digraph G {
rankdir=TB;
node [shape=diamond, style=filled, fillcolor="#ffe0b2", fontname="Arial", fontsize=16];
edge [fontname="Arial", fontsize=16];
prop [label="property"];
transform [label="transform"];
perspective [label="perspective"];
filter [label="filter"];
will_change [label="will-change"];
new_cb [label="New Containing Block", shape=ellipse, fillcolor="#dcedc8"];
prop -> transform;
prop -> perspective;
prop -> filter;
prop -> will_change;
transform -> new_cb;
perspective -> new_cb;
filter -> new_cb;
will_change -> new_cb;
}
digraph G {
rankdir=LR;
node [shape=box, style=filled, fontname="Arial", fontsize=16];
edge [fontname="Arial", fontsize=16];
outer [label="outer\n(transform applied)", fillcolor="#ffccbc"];
wrapper [label="wrapper\n(position: relative)", fillcolor="#e1f5fe"];
child [label="child\n(position: absolute)", fillcolor="#c8e6c9"];
outer -> wrapper [label="contains"];
wrapper -> child [label="CB is wrapper"];
}
完整示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Containing Block Fix</title>
<style>
.container {
position: relative;
width: 300px;
height: 300px;
background: #eee;
}
.child {
position: absolute;
top: 10px;
left: 10px;
width: 50px;
height: 50px;
background: red;
}
</style>
</head>
<body>
<div class="container">
<div class="child"></div>
</div>
</body>
</html>
预期结果：红色方块位于容器左上角 10px 处。若移除 .container 的 position: relative，方块将相对于 body 定位，可能导致页面滚动时位置异常或超出视口。
