如何实现图片垂直超出背景条且不影响其他布局？

要让背景容器完全贴合<p>元素的高度，同时让图片右上角留在背景条内、底部超出，核心是让图片脱离文档流，不影响容器高度。可以通过绝对定位实现，无需硬设容器高度：

<div style="display: flex; justify-content: center; background-color: hsl(215, 100%, 86%);">
  <div style="position: relative; display: flex; justify-content: space-between; width: 500px;">
    <p style="width: 30ch;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <div style="position: absolute; right: 0; top: 0;">
      <img src="https://unsplash.it/150">
    </div>
  </div>
</div>

关键调整说明： #

1. 给内部容器添加position: relative，作为图片容器的定位参考基准
2. 图片容器设置position: absolute; right: 0; top: 0;，脱离文档流后，内部容器的高度完全由<p>元素决定，背景条高度也会自动贴合文本高度
3. 图片右上角会对齐到内部容器的右上角（即背景条的右侧区域），底部自然延伸到背景条下方

如果需要微调图片位置：

• 修改right值调整水平偏移（比如right: 10px让图片左移）
• 修改top值调整垂直偏移（比如top: 5px让图片下移）

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