如何仅用Flexbox将文字置于图片之上（不使用position属性）？

完全可以做到，不用position属性，靠Flexbox的order属性或者flex-direction方向反转就能实现，下面给你三种可行方案：

方案1：用order属性（不修改HTML结构） #

给外层section设置为flex容器，指定垂直排列，然后通过order调整文字的排列优先级，让它排在图片前面：

section {
  display: flex;
  flex-direction: column; /* 让子元素垂直排列 */
}

.paragraph {
  order: -1; /* 默认order值是0，设为-1会排在所有默认order的元素前面 */
}

你的组件代码无需调整结构，保持原样即可：

const Component = () => {
  return (
    <section>
      <img src={mountains} />
      <p className="paragraph">Hello everyone</p>
    </section>
  );
};

export default Component;

方案2：反转flex方向（不修改HTML结构） #

直接给flex容器设置flex-direction: column-reverse，反转垂直排列的顺序，原本在后面的文字就会被排到前面：

section {
  display: flex;
  flex-direction: column-reverse; /* 反转垂直排列的顺序 */
}

这种方法连文字的额外样式都不用加，仅靠容器的方向设置就能实现效果。

方案3：调整HTML结构（最直观） #

如果允许修改结构，把<p>标签放到<img>前面，再给section设置垂直排列：

section {
  display: flex;
  flex-direction: column;
}

组件代码调整为：

const Component = () => {
  return (
    <section>
      <p className="paragraph">Hello everyone</p>
      <img src={mountains} />
    </section>
  );
};

export default Component;

以上三种方法都完全依赖Flexbox实现，不需要用到任何position属性。

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