使用Chakra UI中position="fixed"时元素为何超出屏幕？

原因分析 #

• 普通状态下的<Box w="100%">属于正常文档流，宽度是相对于父容器计算的，同时会继承父容器的盒模型约束（比如父容器的内边距、外边距），所以能刚好适配屏幕显示。
• 当添加position="fixed"后，元素脱离了正常文档流，此时的w="100%"是直接相对于**浏览器视口（viewport）**计算宽度。但浏览器默认的body标签通常带有默认外边距，而且fixed定位元素不会继承父容器的盒模型限制，导致元素宽度等于视口宽度，再加上自身可能的边框、内边距，最终就会超出屏幕范围。

解决办法 #

• 推荐用left="0"和right="0"替代w="100%"，让fixed元素的左右边缘直接贴合视口，自动适配宽度：

  <Box position="fixed" left="0" right="0">
    {/* 内容 */}
  </Box>
  

• 如果一定要用w="100%"，可以先清除body的默认外边距（比如在全局样式里设置body { margin: 0 }），同时确保元素的盒模型为border-box（Chakra UI默认已配置，也可以显式指定）：

  <Box w="100%" position="fixed" left="0" boxSizing="border-box">
    {/* 内容 */}
  </Box>
  

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