Shopify图文模块文本优先布局显示异常，求规范解决方案

问题根源 #

文本优先布局时，content-container在image-container之前，wrapper的高度由content-container（即content-inner的原始高度）决定，而image-container的min-height: calc(100% + 480px)会导致图片高度超出wrapper，进而引发image-with-text容器高度塌陷，后续内容会覆盖图片下半部分；图片优先布局时，flex-direction: row-reverse让image-container在前，wrapper高度由图片容器决定，因此显示正常。

非hack解决方案（基于Flex布局与定位优化） #

通过调整定位方式、层叠顺序和高度计算逻辑，让两种布局的渲染逻辑统一：

{% assign selectedImage = section.settings.image %}
{% assign layout = section.settings.layout %}

<div class='image-with-text'>
  <div class='container'>
    <div class='wrapper {% if layout == "image-first" %} image-first {% endif %}'>
      <div class='content-container'>
        <div class='content-inner'>
          <h3 class='title'>
            {{ section.settings.title }}
          </h3>
          <div class='text-container'>
            {{ section.settings.content }}
          </div>
          <div class='button-container'>
            <a href='{{ section.settings.button-link }}' class='button'>{{ section.settings.button-text }}</a>
          </div>
        </div>
      </div>
      <div class="image-container">
        {% if selectedImage %}
          <img
              src="{{ selectedImage.src | img_url: '600x600' }}"
              srcset="{{ selectedImage.src | img_url: '400x400' }} 400w,
              {{ selectedImage.src | img_url: '800x800' }} 800w,
              {{ selectedImage.src | img_url: '1200x1200' }} 1200w"
              sizes="(max-width: 400px) 100vw,
             (max-width: 800px) 50vw,
             33.3vw"
              alt="{{ selectedImage.alt | escape }}"
          />
        {% endif %}
      </div>
    </div>
  </div>
</div>

{% style %}
  /**
  text with image and accent dots
  */
  .image-with-text {
    position: relative;
    display: block;
    padding: 20px;
    width: 100%;
  }

  .image-with-text .wrapper {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
    position: relative;
  }

  .image-with-text .image-container,
  .image-with-text .content-container {
    flex: 1;
    position: relative;
  }

  .image-with-text .content-container {
    height: 100%;
  }

  .wrapper.image-first {
    flex-direction: row-reverse;
  }

  .image-with-text .image-container {
    z-index: 1;
  }

  .image-with-text .image-container img {
    width: 100%;
    min-height: 600px;
    object-fit: cover;
  }

  .image-with-text .content-container .content-inner {
    z-index: 2;
    position: absolute;
    top: 160px;
    left: 120px;
    padding: 40px;
    background-color: white;
    max-width: calc(100% - 240px);
  }

  .image-with-text .image-first .content-container .content-inner {
    left: auto;
    right: 120px;
  }

  .image-with-text .content-inner h3{
    margin-top: 0;
    font-size: 64px;
    margin-bottom: 0;
  }
{% endstyle %}

{% schema %}
{
  "name": "Accented Text with Image",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "t:sections.image-with-text.settings.image.label"
    },

    {
      "type": "text",
      "id": "title",
      "label": "Title",
      "default": "Image with text"
    },

    {
      "type": "richtext",
      "id": "content",
      "label": "Content",
      "default": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus condimentum vestibulum ante, vel ultrices ante cursus eget. Vivamus finibus turpis eu quam feugiat, at convallis sapien finibus. Suspendisse potenti. Mauris nisl diam, accumsan fringilla nisi vitae, pharetra blandit erat. Nam purus leo, posuere sed viverra ut, rutrum sit amet justo.</p>"
    },

    {
      "type": "url",
      "id": "button-link",
      "label": "Button Link"
    },

    {
      "type": "text",
      "id": "button-text",
      "label": "Button Text",
      "default": "Read More"
    },


    {
      "type": "select",
      "id": "layout",
      "options": [
        {
          "value": "image-first",
          "label": "Image first"
        },
        {
          "value": "text-first",
          "label": "Text first"
        }
      ],
      "default": "image-first",
      "label": "Layout",
      "info": "Place image first or second"
    },
    {
      "type": "select",
      "id": "content_layout",
      "options": [
        {
          "value": "no-overlap",
          "label": "t:sections.image-with-text.settings.content_layout.options__1.label"
        },
        {
          "value": "overlap",
          "label": "t:sections.image-with-text.settings.content_layout.options__2.label"
        }
      ],
      "default": "no-overlap",
      "label": "t:sections.image-with-text.settings.content_layout.label"
    }
  ],
  "blocks": [
    {
      "type": "heading",
      "name": "t:sections.image-with-text.blocks.heading.name",
      "limit": 1,
      "settings": [
        {
          "type": "inline_richtext",
          "id": "heading",
          "default": "Image with text",
          "label": "t:sections.image-with-text.blocks.heading.settings.heading.label"
        }
      ]
    },
    {
      "type": "text",
      "name": "t:sections.image-with-text.blocks.text.name",
      "limit": 1,
      "settings": [
        {
          "type": "richtext",
          "id": "text",
          "default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
          "label": "t:sections.image-with-text.blocks.text.settings.text.label"
        },
        {
          "type": "select",
          "id": "text_style",
          "options": [
            {
              "value": "body",
              "label": "t:sections.image-with-text.blocks.text.settings.text_style.options__1.label"
            },
            {
              "value": "subtitle",
              "label": "t:sections.image-with-text.blocks.text.settings.text_style.options__2.label"
            }
          ],
          "default": "body",
          "label": "t:sections.image-with-text.blocks.text.settings.text_style.label"
        }
      ]
    },
    {
      "type": "button",
      "name": "t:sections.image-with-text.blocks.button.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "button_label",
          "default": "Button label",
          "label": "t:sections.image-with-text.blocks.button.settings.button_label.label",
          "info": "t:sections.image-with-text.blocks.button.settings.button_label.info"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "t:sections.image-with-text.blocks.button.settings.button_link.label"
        },
        {
          "type": "checkbox",
          "id": "button_style_secondary",
          "default": false,
          "label": "t:sections.image-with-text.blocks.button.settings.outline_button.label"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Accented Text With Image",
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "text"
        },
        {
          "type": "button"
        }
      ]
    }
  ]
}
{% endschema %}

关键修改说明 #

1. 布局稳定性优化：将.wrapper的display从inline-flex改为flex，避免inline元素的潜在布局异常
2. 层叠顺序统一：给.image-container设置z-index:1，确保图片始终在文本内容下方
3. 解决容器塌陷：将.content-inner改为position:absolute，脱离文档流，不再影响wrapper的高度计算
4. 偏移逻辑简化：用top/left/right代替transform实现文本偏移，避免transform带来的层叠上下文问题
5. 打破循环依赖：替换min-height: calc(100% + 480px)为固定最小高度，确保图片容器有稳定的高度基准
6. 内容宽度限制：给.content-inner添加max-width，避免文本内容过宽超出容器范围

修改后两种布局的渲染逻辑完全统一，容器高度不再塌陷，文本与图片的重叠效果和参考图一致。

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