添加模态框按钮后同class六边形元素布局错位解决方案

开发单页Kiosk自助终端页面，核心交互为点击按钮弹出对应模态框。添加按钮与模态框代码后，两个使用hexagon-item类的六边形div元素出现位置偏移，无法形成预期的蜂窝状排布；添加相关代码前所有六边形元素布局完全正常，已留存完整CSS/HTML/JS代码、预期布局效果截图、实际错位效果截图，需要修复错位问题，恢复六边形正常蜂窝排列。

这类新增功能后出现的固定类名元素布局错位，90%以上是样式污染或DOM结构被破坏导致，按以下顺序排查即可解决：

• 排查全局样式污染
  检查新增的按钮、模态框相关CSS，有没有写不带作用域的通用选择器：比如直接对div、button标签设置margin、padding、float、position、display属性，这类全局规则会直接作用到六边形元素上破坏布局。修复方式是给模态框加独立的根容器类名（比如.kiosk-modal），所有模态框、模态框内按钮的样式都带上父类前缀，例如.kiosk-modal .btn，避免样式泄露到全局。
• 排查布局容器的DOM结构
  蜂窝布局一般依赖父容器下直接子元素为hexagon-item，通过nth-child选择器给奇偶行元素设置偏移值。如果把按钮、模态框节点错误插入到六边形的父布局容器内部，会导致nth-child匹配规则错位，偏移量应用到错误的元素上。修复方式是把所有模态框节点移到六边形布局容器外部，统一放在</body>闭合标签前即可；如果触发按钮是嵌在六边形内部的，给按钮设置box-sizing: border-box，避免内边距撑大六边形尺寸破坏对齐。
• 排查模态框的初始布局占位
  如果模态框初始状态没有设置隐藏、也没有加固定定位脱离普通文档流，渲染时会占据文档流位置，挤动后续六边形元素错位。给模态框根元素默认添加以下样式，确保未触发时完全不占用普通流空间：

  .kiosk-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999;
  }
  

• 快速定位技巧

  打开浏览器开发者工具，选中错位的两个六边形，在「计算样式」面板对比它和正常六边形的属性差异，重点核对margin、padding、position、transform、display、top、left几个属性，多出来的异常值就是错位根源，顺着样式来源就能直接定位到出错的新增代码段。

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