Html 如何在另一个Div动态更改高度时固定Div位置不移动

我有一个“bouncing loader”div，它在无限循环中上下移动（见下图）

但是，如果我在它下面放置一个按钮（或者其他任何东西），它也会及时移动到动画效果

有没有办法阻止这个按钮移动

我尝试在两个页面上添加

边距

/

填充

，但都不起作用，所以我删除了它们

加载程序html：

<div class="loader" style="float:initial;">
    <span></span>
    <span></span>
    <span></span>
</div>
<br />

<div>
    <button id="popupArea">Click here to invoke a popup window</button>
</div>

一如既往，欢迎您提供任何帮助/建议

---

请注意，我不知道jquery，因此希望尽可能避免使用它（因此我使用asp MVC）

只需添加以下css属性：

#popupArea {
   position:fixed;
   top:100px;//you can change the value as you wish
}

示例。

像这样试试

.loader{
文本对齐：居中；
}
.装载机跨度{
显示：内联块；
垂直对齐：中间对齐；
宽度：10px；
高度：10px；
保证金：50px自动；
背景：黑色；
边界半径：50px；
-webkit动画：加载程序0.9秒无限交替；
-moz动画：加载程序0.9秒无限交替；
}
.装载机跨度：第n个类型（2）{
-webkit动画延迟：0.3s；
-moz动画延迟：0.3s；
}
.装载机跨度：第n个类型（3）{
-webkit动画延迟：0.6s；
-moz动画延迟：0.6s；
}
@-webkit关键帧加载程序{
0% {
宽度：10px；
高度：10px；
不透明度：0.9；
-webkit转换：translateY（0）；
}
100% {
宽度：24px；
高度：24px；
不透明度：0.1；
-webkit转换：translateY（-21px）；
}
}
@-moz关键帧加载程序{
0% {
宽度：10px；
高度：10px；
不透明度：0.9；
-moz变换：translateY（0）；
}
100% {
宽度：24px；
高度：24px；
不透明度：0.1；
-moz变换：translateY（-21px）；
}
}

单击此处调用弹出窗口

尝试将高度放在装载机的div处

.loader {
    text-align: center;    
    height:85px;
}

---

简单，只需设置跨度的高度即可

在加载器中设置高度：100px；

.loader {
    text-align: center; 
    height:100px;
}

---

这是一个

@NoName为什么要使用

位置：固定；

？？如果将

高度：100px；

设置为

，则可以获得相同的结果。loader

-谢谢，我没有考虑过。干得好。出于某种原因，这对我不起作用（但Darshak的不起作用？）也许你的css在这个页面上。JSFIDLE正在工作。也许Darshak的解决方案更好！问题是，两者（我认为）应该产生相同的结果（但没有？）。但我实际上不记得加载程序来自何处，已经将它存储在我的yonks文件中了！：）我实际上只是在尝试这个（作为接受答案的替代）-但由于某种原因，它不起作用？接受答案向div添加了一个Height属性，而这将它添加到css。真奇怪。。。

.loader {
    text-align: center; 
    height:100px;
}