WordPress主题与自定义HTML页CSS冲突致滚动条消失及侧边栏粘性失效问询

这类问题本质是WordPress主题/插件的全局样式规则，与自定义页面的专属样式、结构产生了优先级/命名冲突，可通过以下方案从根源规避：

1. 做好命名空间隔离，避免全局命名冲突 #

• 给所有自定义页面的根容器设置唯一、辨识度高的专属ID/类名，比如#custom-odoo-pricing这类不会和主题、插件预置命名重合的名称，所有自定义页面的CSS规则都加上该前缀，通过选择器优先级天然覆盖全局规则，不需要额外提权
• 自定义页面结构时，避开主题预置的全局容器ID/类名，比如本次冲突的#wrapwrap就是多数WordPress主题默认的全局内容容器ID，主题通常会给它预置height: 100%、overflow: hidden这类影响全局布局的规则，自定义页面嵌套后自然会被规则命中

2. 合理管控样式优先级，避免破坏性全局修改 #

• 不要滥用!important提权，仅在确需覆盖第三方硬编码样式时使用，日常优先通过选择器嵌套（专属前缀+目标类名）的方式控制优先级，既不会影响全局样式，也不会出现优先级互相覆盖的死循环
• 不要直接修改html、body这类根元素的全局布局属性（比如本次的overflow修改），这类修改会破坏所有子元素的布局上下文：sticky定位要求父元素不能设置overflow为hidden/auto/scroll，且父元素高度需要大于sticky元素，全局修改根元素overflow属性会直接导致sticky失效

3. 自定义页面结构隔离 #

• 如果是完全独立的自定义页面，可直接在WordPress中创建专属自定义页面模板，剔除主题默认的全局容器、多余布局包裹，仅保留自定义页面需要的结构，从根源上避免被主题全局样式影响，效果和部署在独立服务器上完全一致
• 如果需要保留主题公共模块（如导航、页脚），可在自定义模板中仅调用对应公共模块代码，中间内容区完全自行定义容器结构，不要嵌套主题默认的内容容器

4. 上线前冲突校验 #

自定义页面上线前，在浏览器禁用缓存的状态下测试不同屏幕尺寸的表现，同时通过开发者工具元素面板查看目标元素的样式继承链，确认没有被非预期的全局样式命中，提前排查冲突。

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