移动端 CSS 绝对定位元素为何脱离文档流导致布局错乱
当子元素使用绝对定位时，若父容器未设置相对定位，元素将相对于视口定位并脱离文档流，导致页面布局错乱。
检查父容器是否设置了相对定位
在移动端开发中，若希望子元素相对于父容器进行定位，必须确保父容器设置了相对定位属性。相对定位是创建定位上下文的必要条件，它使子元素的绝对定位参考点变为父容器的边界而非浏览器视口。如果父容器未设置此属性，子元素将脱离文档流并相对于视口进行定位，这会导致页面布局错乱。检查时需确认父容器代码中是否包含 position: relative。
可以通过在父容器样式中添加 position: relative 来创建定位上下文。例如，在 MDN 的示例代码中，容器类 .container 需要添加此属性，以便内部的 .target 元素能够相对于容器进行定位。若未添加，子元素将无法正确附着在父容器内部，造成布局偏移或重叠。这是解决此类布局问题的首要排查步骤。
确认子元素使用了绝对定位属性
子元素必须应用绝对定位属性才能相对于父容器进行偏移。绝对定位通过 position: absolute 属性实现，它使元素脱离正常文档流，并允许通过 top、right、bottom 和 left 属性精确控制其位置。在移动端布局中，常使用绝对定位来实现悬浮按钮或固定面板。若子元素未设置此属性，它将保持文档流中的默认位置，无法实现预期的定位效果。
在 MDN 的示例中，目标元素 .target 需要添加 position: absolute，并结合 top 和 right 属性将其放置在容器的右上角。若未添加绝对定位，元素将无法脱离文档流，导致其位置无法通过坐标控制。确保子元素正确应用了绝对定位是完成布局任务的关键。
验证定位上下文的层级关系
定位上下文的层级关系决定了元素定位的参考系。只有设置了相对定位的父容器才能作为绝对定位子元素的参考系。如果父容器未设置相对定位，子元素的定位将相对于视口进行，这会导致元素脱离文档流并可能覆盖其他内容。在移动端，这种错乱可能表现为页面元素重叠或内容被遮挡，影响用户体验。
MDN 的示例明确指出，若在子元素上添加绝对定位而未在父容器上添加相对定位，目标元素将相对于视口定位。这验证了定位上下文的重要性。通过在父容器上设置相对定位，可以确保子元素正确附着在父容器内部，从而避免布局错乱。
使用浏览器开发者工具进行复现检查
在移动端浏览器中，可以使用开发者工具检查元素的定位属性和上下文关系。首先，选中目标元素，查看其 position 属性是否为 absolute。然后，检查其父元素是否设置了 position: relative。如果父元素未设置，可以尝试添加此属性并观察布局变化。这种方法可以快速定位问题所在。
MDN 的示例代码提供了一个具体的检查场景。通过在父容器上添加 position: relative，可以确保子元素相对于容器定位。若未添加，子元素将相对于视口定位。通过复现这一步骤，可以验证定位上下文的作用，并确认布局错乱的原因。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。