Javascript insertBefore向下推送元素

我正在尝试使用insertBefore在另一个div上插入一个div，到目前为止，它工作正常。但是，它会向下推动div，我正试图在上面插入它，如果可能的话，我想阻止它。下面是我正在使用的代码以及一个JSFIDLE示例：

JS:

---

谢谢你的帮助，这很正常。由于

outerDiv

具有固定的定位，因此它将保持其在屏幕上的当前位置，但其内容将按照正常的布局算法流动。您正在将

按钮插入
innerDiv
之前，因此该按钮将是
outerDiv
中的第一个新子按钮，因此它将位于
outerDiv
的开始位置。（您知道，
insertBefore
将插入调用方法的元素中，插入指定为第二个参数的子元素之前，对吗？）

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

尝试将innerDiv设置为绝对位置：

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

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

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

检查

我在CSS中做了一些更改

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

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

其中，
.outerdiv
被占用，
#innerdiv
被放置在
.outerdiv
的正下方。似乎我们正在ID上方添加一个元素，这是必需的。
问题是您正在添加到包含innerDiv的容器中，因此需要向下推。给按钮一个负边距（高度：Npx；边距顶部：-Npx）或重新考虑如何执行此操作。是否只想在ID上方添加一个元素或多个元素？我只想在IDI上方添加一个元素。我认为这是正常的，只是不确定如何解决它。这是有效的，谢谢。它会如何影响响应能力？@ameyarote我同意，这只是一个如何使用CSS的例子。一个好的解决方案取决于实际的用例、用户界面等。对于如此广泛的问题，没有通用的解决方案，其他解决方案可能包括在页边距内浮动，使用
可见性
而不是添加新元素，在添加新元素时更改
outerDiv
上的填充，SergiuDumitriu-U在CSS部分和实际用例UI方面部分正确。但必须有一些通用的解决方案。关于这个查询，OP只想添加一个ID，这限制了工作范围。这会在div下面插入按钮，这不是我要找的。如果你不想添加padding，请从outerDiv类中删除padding top属性抱歉，我一开始不知道你在问什么，我真正想做的是在div下面添加一个按钮，然后在id的上下各添加一个bitU-want按钮，对吗？你需要多少个这样的按钮？或者只需要上面和下面的一个按钮下面会有三到五个按钮，但它们都在同一行。这就是@akhilesh巧妙地做到的。请具体说明uwant的具体内容，并给出示例（图表会很好）以帮助您。他所做的是在顶部和底部添加按钮。如果我只想在顶部添加一个按钮，那么您的示例非常有效，但是，当我在底部添加一个按钮时，底部按钮会出现在div后面
.outerDiv {
    position: fixed;
    left: 100px;
    top: 100px;
}​

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

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

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

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

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