javascript - insertBefore 将元素向下推

Question

我正在尝试使用 insertBefore 在另一个 div 上方插入一个 div，到目前为止它的工作正常。但是，它会向下推我试图在上面插入的 div，如果可能的话，我想防止这种情况发生。这是我与 jsFiddle 示例一起使用的代码：

JS：

var innerDiv = document.getElementById('innerDiv');

function addButtons() {
    var buttons = document.createElement('div'),
        outerDiv = document.getElementById('outerDiv');

    buttons.innerHTML = '<input type="button" id="button" value="button" />';  

    outerDiv.insertBefore(buttons, outerDiv.childNodes[0]);        
}

innerDiv.onfocus = addButtons;​

HTML：

<div id="outerDiv" class="outerDiv">
     <div id="innerDiv" contenteditable="true">Testing</div>
</div>

CSS：

.outerDiv {
    position: fixed;
    left: 100px;
    top: 100px;
}​

jsFiddle 示例

谢谢您的帮助

Answer 1

这是正常的。由于outerDiv有固定的定位，它会保持它在屏幕上的当前位置，但它的内容会按照正常的布局算法流动。您要button在. innerDiv_ （您确实知道在您调用该方法的元素内，在您指定为第二个参数的子元素之前插入，对吗？）outerDivouterDivinsertBefore

如果您希望新元素不影响布局，则应为其添加一些样式。例如：

#button {
    position: absolute;
    top: -2em;
}

Answer 2

尝试使 innerDiv 绝对定位：Demo

.innerDiv{
    position: absolute;
    top: 0px;
}

.outerDiv {
    position: fixed;
    left: 100px;
    top: 100px;
    padding-top: 30px;
}

Answer 3

我想说这是保持页面响应以及在 id 上方添加元素的最佳方式之一。

检查小提琴

我对 CSS 做了一些更改

.outerDiv {
    position: fixed;
    top: 80px;
    left: 100px;
}    

#innerDiv {
    position: fixed;
    top: 100px;
}

where.outerdiv被占用并#innerdiv放置在.outerdiv. 似乎我们在 ID 上方添加了一个元素，这是必需的。