Woocommerce站点Add to cart按钮对齐错位及响应式显示异常求助

• 排查层级属性设置：优先检查按钮所在产品卡片和下方产品卡片的z-index值，小屏断点下若下方卡片z-index高于上方卡片会直接导致遮挡。可给Add to cart按钮单独设置z-index: 10（数值匹配站点现有层级规则即可），注意要同步给按钮或其最近父级设置非static的position属性（relative优先，不影响原有布局）才能让z-index生效。
• 排查容器高度规则：如果产品卡片在小屏下设置了固定高度，按钮所在内容区高度溢出父容器时就会超出卡片范围被下方元素遮挡。将固定高度改为min-height，或者调整小屏下的内容内边距、字体大小避免内容溢出即可解决。
• 排查布局间距配置：如果产品列表用Flex/Grid布局，检查小屏断点下的行间距gap是否设置过小；如果用浮动布局，检查是否未做浮动清除，这两类情况都会导致上下行元素重叠。对应调整gap数值、给浮动容器添加clear: both的清除规则即可。
• 排查溢出规则限制：检查按钮的父级容器是否设置了overflow: hidden，小屏下按钮超出父容器范围时会被强制裁切，可按需将overflow改为visible，或者增大父容器底部内边距给按钮留出足够展示空间。

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