CSS 定位元素宽高不生效，通常并不是 width 或 height 写错，而是包含块尺寸与盒模型约束没有被正确理解。绝对定位和固定定位会让元素脱离常规文档流，其百分比宽高的参照对象、偏移量的计算基准以及溢出裁剪边界都会发生变化。如果不把这些规则和盒模型放在一起考虑，开发者很容易遇到宽度撑不开、高度塌陷、滚动条不出现或者裁剪失效等问题。
理解这些规则之后，再结合布局实例可以更清晰地判断元素最终尺寸。定位元素的宽高控制并不是单一属性决定的，而是定位上下文、偏移量、内外边距、边框和 box-sizing 共同计算的结果。
一、定位上下文与包含块：宽高计算的起点
定位元素的宽高计算，第一步是找到包含块。对于 position: static 或 relative 的元素，包含块通常是最近块级祖先的内容区；而 position: absolute 的包含块是最近的非 static 祖先元素的填充盒（padding box）。这意味着如果祖先有 padding，百分比宽度会基于 padding box 的宽度，而不是内容区宽度。这一点容易和普通文档流元素混淆。
例如，父容器宽度 400px，padding 40px，那么内容区宽度为 320px。如果子元素 position: absolute; width: 50%，它的宽度是 200px，而不是 160px。代码如下：
.parent {
position: relative;
width: 400px;
padding: 40px;
height: 200px;
}
.child {
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
background: #4a90d9;
}
这里 child 的 width 基于 parent 的 padding box 宽度 400px，得到 200px；height:100% 则基于 parent 的 height 200px。但如果父元素没有显式高度，height:100% 可能失效，因为包含块高度为 auto 时，百分比高度无法解析，最终会按 auto 处理。
position: relative 不会脱离文档流，它只是在原位置基础上偏移，宽高仍按正常流计算；position: fixed 的包含块通常是视口，除非某个祖先元素设置了 transform、perspective、filter 等会建立新的包含块。position: sticky 比较特殊，元素在滚动容器中先按相对定位参与布局，达到阈值后才表现为固定定位，但它的包含块是滚动容器，宽度也受容器限制。
二、绝对定位拉伸规则：同时设置 left 和 right
绝对定位元素最具迷惑性的规则是：如果同时设置了 left 和 right，且 width 为 auto，那么宽度会从包含块中拉伸出来，而不是由内容撑开。具体计算公式为：left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 包含块宽度。
当 left、right 都是非 auto，width 是 auto 时，浏览器会通过这个等式自动求解 width；当 margin 为 auto 时，会在水平方向均分剩余空间。这也是绝对定位元素实现水平居中的核心原理：设置 left:0; right:0; margin:auto; 并且给元素一个明确宽度。
.parent {
position: relative;
width: 600px;
height: 300px;
background: #f2f2f2;
}
.child {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 200px;
height: 120px;
background: #e45d5d;
}
在这个例子中，元素宽高都固定，left、right、top、bottom 都是 0，margin 为 auto，浏览器会在包含块内计算偏移并水平垂直居中。需要注意的是，如果 width 也设置为 auto，那么 left/right 拉伸会覆盖 auto width，元素会被拉满包含块宽度，margin:auto 不再有剩余空间，水平居中效果就消失了。
盒模型中的 padding 和 border 同样参与等式。即使 left/right 设置相同，不同 box-sizing 也可能导致实际可视宽度不同。使用 content-box 时，width 只表示内容区，padding 和 border 会额外增加总宽度；使用 border-box 时，width 包含 padding 和 border。定位偏移量是基于 margin box 的外边缘计算，因此最终渲染尺寸必须把 margin、border、padding 都纳入判断。
三、盒模型对定位元素尺寸与边距的影响
绝对定位元素的 auto margin 行为与文档流元素不同。在文档流中，margin:auto 通常只有水平方向且需要固定宽度才能居中；在绝对定位中，只要对应方向的偏移量为非 auto，且 width/height 不是 auto，auto margin 就能分配剩余空间，甚至可以实现垂直居中。这个特性依赖盒模型的约束等式。
另一个容易忽略的点是，固定定位元素如果 width:100% 且没有设置 box-sizing，视口滚动条会挤占布局，导致元素宽度超过视口。建议统一使用 box-sizing: border-box，这样 padding 和 border 不会让定位元素意外撑出包含块。比如：
* {
box-sizing: border-box;
}
.fixed-header {
position: fixed;
left: 0;
right: 0;
top: 0;
height: 60px;
padding: 0 16px;
background: #333;
color: #fff;
}
此时 left 和 right 同时为 0，width 未显式声明，自动拉伸。由于 border-box，padding 包含在拉伸宽度内，不会造成水平溢出。
粘性定位元素虽然在页面滚动时切换表现，但它的原始占位仍然属于正常文档流，宽高不能像绝对定位那样依赖 left/right 拉伸。如果希望 sticky 元素占满整个滚动容器宽度，应显式设置 width:100% 或使用块级默认行为。
四、溢出控制：overflow 与定位元素的裁剪边界
overflow 用来控制内容超过块容器时如何表现，常用值有 visible、hidden、scroll 和 auto。非 visible 值会创建新的格式化上下文，并且裁剪内容到容器的 padding box。但这里有一个关键点：只有包含块是该容器的绝对定位后代会受其 overflow 影响。如果绝对定位元素的包含块是更高层的祖先，那么即使某一层父级设置了 overflow:hidden，元素也不会被裁剪。
比如以下结构：
<div class="outer">
<div class="middle">
<div class="box"></div>
</div>
</div>
如果 .middle 设置了 overflow:hidden，但 .box 的定位包含块是 .outer（因为 .middle 没有 position），那么 .box 就可能被定位到 .middle 的可视区域之外而不被裁剪。解决办法是把 position:relative 设置在 .middle 上，让它成为包含块，overflow:hidden 才会裁剪 .box。
滚动容器也需要清晰的高度约束。如果父容器高度为 auto，内容会直接把父级撑高，而不会出现滚动条。要启用滚动，必须设置 height 或 max-height。另一个细节是，overflow-x 与 overflow-y 不能一个为 visible、另一个为非 visible；如果这样写，visible 会被浏览器计算为 auto。比如想要横向滚动而纵向溢出可见是不成立的，除非把纵向溢出也设为 clip 或 auto。
.scroll-panel {
width: 300px;
height: 200px;
overflow: auto;
position: relative;
border: 1px solid #ccc;
}
.large-item {
position: absolute;
left: 0;
top: 0;
width: 600px;
height: 40px;
background: #5b8ff9;
}
在 .scroll-panel 中，large-item 的宽度 600px 超过容器 300px，会产生水平滚动；高度 40px 未超过 200px 不会产生垂直滚动。如果希望垂直也滚动，可以给 large-item 设置 height:300px 或放置多个元素。
五、常见问题排查与最佳实践
实际项目中，定位元素尺寸异常可以按以下顺序排查：确认包含块是否与预期一致；检查百分比宽高参照的对象是否有确定尺寸；确认 left/right/top/bottom 是否同时设置并触发了拉伸；检查 box-sizing 是否统一；最后再调整 overflow。一个典型错误是：父容器没有 position:relative，绝对定位子元素却以更高层祖先为包含块，导致宽度和位置完全偏离。
另一个高频问题是滚动失效。即使子元素高度超过父容器，如果父容器没有限制高度，滚动条不会出现。可以给父容器设置 height:100% 时需要保证祖先链高度是确定的，否则百分比高度仍会失效。使用 max-height 配合 overflow:auto 是更稳妥的做法。
最后，建议在全局样式中统一 box-sizing:border-box，并在需要裁剪定位元素的地方显式声明包含块。定位和盒模型不是孤立概念，两者结合才能准确控制宽高和溢出，避免布局怪异和滚动异常。