插入自定义分数div后段落移位至文档流末尾，如何修复？

问题核心原因 #

你遇到的段落移位和position属性完全无关，问题出在代码末尾的这行操作：

document.body.appendChild(document.getElementById("test"))

DOM中的元素只能存在于文档树的一个位置，当你对已经存在的test段落调用appendChild时，它会被从原位置移除，再追加到body的末尾，这才是段落跑到文档最后的直接原因。

另外，默认div是块级元素，即使解决了移位问题，分数组件也会独占一行跑到文字下方，还需要调整CSS让它和文字同行显示。

解决方案 #

1. 移除移位触发代码：删掉document.body.appendChild(document.getElementById("test"))这一行——test段落本来就已经在DOM结构中，不需要重复追加到body。
2. 调整分数组件显示模式：给.frac类添加display: inline-block，让它能和文字在同一行排列，再通过CSS调整垂直对齐，保证和文字居中对齐。

修正后的代码 #

JavaScript部分（移除多余行）

var rlabel = document.getElementById("test")

is_fraction = true

document.getElementById("btndown").disabled = false;
// 生成元素实例
var div1  = document.createElement("div")
var span1 = document.createElement("span")
var span2 = document.createElement("span")
var span3 = document.createElement("span")
 
div1.setAttribute("id","d1")

// 添加样式类
div1.classList.add("frac")
div1.classList.add("relative")
span2.classList.add("symbol")
span3.classList.add("bottom")

// 创建文本节点
var textspan1 = document.createTextNode("□")
var textspan2 = document.createTextNode("/")
var textspan3 = document.createTextNode("□")

// 绑定文本节点到span
span1.appendChild(textspan1)
span2.appendChild(textspan2)
span3.appendChild(textspan3)

// 绑定span到分数容器
div1.appendChild(span1)
div1.appendChild(span2)
div1.appendChild(span3)

// 将分数组件插入到目标段落（这一步就足够）
document.getElementById("test").appendChild(div1)

CSS补充建议

.frac {
    display: inline-block;
    vertical-align: middle; /* 和文字居中对齐 */
    margin: 0 4px; /* 分数与文字间预留间距 */
}
/* 优化分数排版 */
.frac span:first-child {
    display: block;
    text-align: center;
    font-size: 0.8em;
    line-height: 1.2;
}
.frac .symbol {
    display: block;
    text-align: center;
    font-size: 0.8em;
    line-height: 1;
}
.frac .bottom {
    display: block;
    text-align: center;
    font-size: 0.8em;
    line-height: 1.2;
}

效果说明 #

移除多余的appendChild操作后，test段落会保留在原位置；设置display: inline-block后，分数组件会和“Rechnung: ”文字在同一行显示，配合CSS调整后的排版，就能达到你预期的效果。

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