网页开发中文本覆盖显示在图片上方是什么原因导致的？

文本层叠显示在图片上方，为什么会出现这个问题？

出现这类布局异常，核心是元素脱离正常文档流、位置偏移或者层级配置错误，具体原因通常有以下几类：

• 浮动未清除
  如果给图片设置了float: left或者float: right，图片会脱离标准文档流，不再占据原本的布局位置，后续的文本块会顺着正常文档流排布到图片所在区域，形成叠层。
• 定位设置不当
  如果给图片设置了position: absolute（绝对定位）或者position: fixed（固定定位），图片同样会脱离正常文档流，原本留给图片的位置会被清空，相邻文本会直接排布到该位置造成重叠。
• 负边距导致偏移
  如果图片或者相邻文本块设置了负向外边距，比如margin-top: -25px，元素会沿着边距的反方向偏移，超出自身原本的布局范围，和相邻内容叠在一起。
• z-index层级配置错误
  如果图片和文本都设置了非static的定位属性，且文本的z-index数值比图片高，层级更高的文本就会显示在图片上方，形成覆盖效果。

• 针对浮动导致的问题：给图片后方的文本元素添加clear: both清除浮动影响，或者给包裹图片、文本的父容器设置display: flow-root开启BFC，让父容器正确包裹浮动的图片，把文本挤到正常的排布位置。
• 针对定位导致的问题：不需要脱离文档流的场景下，把图片的position属性改回默认值static，让图片回归正常文档流；如果必须使用绝对/固定定位，就给父容器添加和图片高度匹配的内边距，给图片预留独立的排布空间，避免文本占住图片的位置。
• 针对负边距导致的问题：排查相邻元素的margin属性，移除不合理的负边距设置，或者给相邻元素添加对应方向的正向外边距，撑开布局空间避免重叠。
• 针对层级错误导致的问题：调整两个元素的z-index数值，把图片的层级设置得高于文本，或者直接移除不必要的定位和z-index配置，让元素按照默认文档流的顺序从下到上排布即可。

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