本文详解如何通过重构 css 定位策略、优化 flex 布局与动态圆环文本生成逻辑，解决 shopify 自定义 section 中文本区、图片组及环形文字的错位问题，并确保响应式兼容性。
本文详解如何通过重构 css 定位策略、优化 flex 布局与动态圆环文本生成逻辑，解决 shopify 自定义 section 中文本区、图片组及环形文字的错位问题，并确保响应式兼容性。
在 Shopify 主题开发中，自定义 section 的视觉还原度高度依赖于 CSS 定位的精确性。原始代码中采用大量固定 left/top 值和 position: absolute 的硬编码方式，导致 .text-section 与 .images-wrapper 在 .container-wrapper 内部缺乏语义化空间关系，同时 .circular 元素脱离文档流后未设置合理参照系，造成与图文内容重叠或偏移。
✅ 核心修复策略
1. 替换绝对定位为语义化布局容器
将 .container-wrapper 设为 position: relative（保留），但移除所有子元素的 position: absolute + 手动 left/top，改用 Flex 或 Grid 实现左右分区：
.custom-section .container-wrapper {
display: flex;
align-items: center;
gap: 60px; /* 图文间距 */
padding: 0 40px; /* 防止边缘溢出 */
max-width: 1510px;
margin: 0 auto;
height: 430px;
}
.custom-section .text-section {
flex: 0 0 520px; /* 固定宽度，不伸缩 */
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.custom-section .images-wrapper {
flex: 0 0 960px; /* 图片区域固定宽 */
display: flex;
gap: 30px;
height: 100%;
}⚠️ 注意：
width: 1510px在无max-width和margin: 0 auto时会导致超宽溢出视口，尤其在中小屏下——这是原始布局错位的根源之一。
2. 圆环文字（Circular Text）精确定位
原始 .circular 被置于 <section></section> 级别，脱离 .text-section 上下文，导致无法随文本块整体移动。应将其嵌入 .text-section 底部，并用 position: absolute 相对于父容器定位：
.custom-section .text-section {
position: relative; /* 关键：为 circular 提供定位上下文 */
}
.custom-section .circular {
position: absolute;
bottom: -80px; /* 下移至文本区下方，避免遮挡 */
left: 0;
width: 160px;
height: 160px;
transform: translateX(-20px); /* 微调水平位置 */
}
.circular span {
position: absolute;
font-size: 13px;
line-height: 1;
transform-origin: center; /* 改为 center，更易控制旋转中心 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(0deg); /* 重置基线 */
}同时，JavaScript 动态生成需同步更新 transform-origin 和初始偏移：
document.addEventListener('DOMContentLoaded', () => {
const text = document.querySelector('.circular');
const message = "We’re the bestie that you can be yourself with. ";
text.innerHTML = '';
const charCount = message.length;
for (let i = 0; i < charCount; i++) {
const span = document.createElement('span');
span.textContent = message[i];
// 计算每个字符的旋转角度 + 径向偏移
const angle = (360 * i) / charCount;
const rad = angle * Math.PI / 180;
const radius = 75; // 半径像素值
span.style.transform = `
translate(-50%, -50%)
rotate(${angle}deg)
translate(0, -${radius}px)
rotate(${-angle}deg)
`;
text.appendChild(span);
}
});? 原理：先旋转到目标角度，再沿 Y 轴负方向平移
radius，最后反向旋转以保持字符正立（避免倾斜）。
3. 响应式兜底方案
添加媒体查询，确保小屏设备下布局不崩溃：
@media (max-width: 1200px) {
.custom-section .container-wrapper {
flex-direction: column;
text-align: center;
gap: 40px;
}
.custom-section .text-section,
.custom-section .images-wrapper {
flex: none;
width: 100%;
}
.custom-section .circular {
position: static;
transform: none;
margin: 20px auto 0;
}
}✅ 最佳实践总结
-
避免“魔法数字”：删除所有无注释的
left: 625px、top: 100px等硬编码值，改用flex、gap、padding等语义化属性； -
层级即上下文：
.circular必须嵌套在需要对其定位的父容器内，并设position: relative； -
JS 与 CSS 协同：动态生成的圆环文本需与 CSS 中的
transform-origin、字体大小、半径严格匹配； -
Shopify 兼容性提示：在
.liquid文件中，确保<script></script>标签位于之后，且defer属性保留，避免阻塞渲染。
通过以上调整，不仅能精准复现设计稿的视觉结构，还能显著提升代码可维护性与跨设备一致性——这才是 Shopify 主题定制中真正可持续的定位解决方案。
