使用insertAdjacentHTML插入元素时如何设置position: fixed定位

position: fixed 定位不生效和 insertAdjacentHTML 的插入位置无关联，fixed定位属于脱离正常文档流的定位方式，默认相对于浏览器视口定位，DOM树中的插入位置不会影响其最终渲染位置，按以下步骤排查修复即可：

可直接运行的修正代码 #

document.body.insertAdjacentHTML('afterbegin', `<canvas id="canvas" 
  style="border-radius:10px;width:600px;height:300px;position:fixed !important;top:100px;left:50%;transform:translateX(-50%);box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;z-index:9999;">
</canvas>`);

常见问题排查 #

• 内联样式解析异常：原有代码中style属性内部换行过多，部分场景下会导致HTML解析器截断属性值，造成部分样式丢失。你原来设置的text-align: center仅作用于元素内部的文本内容，对canvas元素本身的位置调整无效，修正代码中新增的left: 50%; transform: translateX(-50%);可实现canvas基于视口的水平居中效果。
• 全局样式覆盖：如果项目内存在针对canvas标签的全局样式，且设置了带!important的position规则，会覆盖你的内联样式，修正代码中给position属性添加了!important可提升优先级避免被覆盖。
• 祖先元素干扰定位上下文：如果body或者任意上层祖先元素设置了transform、perspective、filter、contain: layout/paint这类属性，会改变fixed定位的上下文，使其相对于设置了该属性的祖先元素而非视口定位，临时注释这些属性即可验证是否是该原因导致的定位异常。
• 层级遮挡：如果设置后看不到元素，可能是被其他层级更高的元素遮挡，修正代码中添加了z-index: 9999将元素层级调整到最上层，可用于验证元素是否正常渲染。

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