Javascript 如何将两个元素放置在彼此顶部的中心位置？

问题是： 我有一个表单，下面有一个按钮，可以使用jQuery ajax（）从数据中提交（发布）。我希望在服务器ajax调用期间用微调器（动画png）替换该按钮。但在css中，这样一项琐碎的任务是不可能正确完成的

我所尝试的： 我已将按钮和图像放置在引导行中。Ox ajax调用我已将按钮显示设置为“无”，将img显示设置为“阻止”。但是由于这两个元素的大小不一样，使得整个页面闪烁，破坏了其他元素的定位等等

另一个想法是尝试用绝对定位将两个元素放置在彼此的顶部。但是，尽管css很愚蠢，但我不能将它放在行的中间

是否有一种方法可以将两个元素放置在彼此的顶部，以便我可以控制它们的可见性？ 请记住，我不能使用像素的绝对位置，因为这是一个网页，我不知道浏览器会有多宽，图像可能会在将来更改，按钮中的文本可能会在将来更改，所有这些都会影响绝对大小。 如果我的问题有另一个解决方案，可以防止页面上下跳动，那也太好了

编辑 链接到小提琴实验之一：

这将在屏幕上呈现下面的第二个元素。不在不同的z层上

实验2：

---

这不会使两个元素居中，而是将它们推到包含div的顶部。高度较低的元素应居中。

粗略、准备就绪和未测试：

HTML

jQuery

$('submit').click(function(e){
    e.preventDefault();
    $(this).hide().next().show();
});

---

Ajax调用完成后，反转上面的jQuery。

由于我还没有找到一个有效的解决方案，我又回到了我最初放弃的想法。尽管有点扭曲

HTML

这不是一个完美的解决方案，但却是我能做的最好的解决方案。 缺点：

• 它不是干净的，您必须使用javasript来修复什么是css布局 问题
• 它仍然会引起一些闪烁
• 显示微调器时容器的高度取决于按钮，如果微调器太大，可能会导致剪裁

检查此工作演示：

添加几行jquery并更新您的

css

使用jquery根据按钮div的位置、宽度和高度定位加载div

*单击按钮查看加载div，并尝试将按钮的边距播放到任何像素

###JQUERY

###CSS

---

您需要向我们展示一些代码。您的代码可以解释更多关于您的需求的信息，因此请尝试添加一些细节来讨论更多关于您的问题。我已经尝试了may变体，我认为没有必要全部发布，因为这会增加混乱。但我会编辑这个问题，并在我尝试过的一些不起作用的东西上添加小提琴链接，因为这个问题根本没有得到很好的解释。JSFIDLE似乎完全不相关。正如我在问题中所描述的，这是错误的。这会导致页面闪烁，改变页面上其他元素的位置等等。这是我尝试的第一件事。这只有在按钮和微调器图像占据与像素完全相同的高度时才可行。

.button {
    position: absolute;
    margin: auto;
    height: 50px;
    width: 30px;
    background: blue;
    z-index: 1;
    display: block;
}

.spinner {
    position: absolute;
    margin: auto;
    height: 30px;
    width: 50px;
    background:red;
    z-index: 2;
}

<div>
    <input type='submit' />
    <img src="spinneyIMage.gif" />
</div>

div{ text-align: center; }
div img{ display: none; }

$('submit').click(function(e){
    e.preventDefault();
    $(this).hide().next().show();
});

<div class="row>
    <div id="container-button" class="col-xs-12>
        <button id="button" onclick="button_OnClick(e)">submit form via ajax</button>
        <img src="img/spinner.png" sytle="display: none" />
    </div>
</div>

function btnContact_OnClick() {
    // show the soinner and hide the button
    showSpinner();
    $.ajax(
        {
            type: 'POST',
            url: "someurl.com/target",
            data: $("#form").serialize(),
            dataType: "json",
            complete: function() { hideSpinner();},
            success: onAjaxSuccess,
            error : onAjaxError
        }); 
}

function hideSpinner() {
    $("#spinner").hide();
    $("#button").show();
    // make container height non-fixed and content adjustable again
    $("#container-button").height('auto');
}


function showSpinner() {
    // THis is the trick !!!
    // Make the container fixed height as it was before displaying spinner, so it does not change with content (spinner is not the same height as button
    $("#container-button").height($("#container-button").height());
    $("#button").hide();
    $("#spinner").show();
}

$(document).ready(function () {
  $('.c2').each(function () {
    $(this).css({
      'width': $(this).siblings('.c1').outerWidth(),
      'height': $(this).siblings('.c1').outerHeight(),
      'top': $(this).siblings('.c1').offset().top,
      'left': $(this).siblings('.c1').offset().left
    });
  });
  $('.c2').on('click', function () {
    $(this).hide(0);
  });
});

.c1 {
  margin: 100px auto;
  width: 100px;
  text-align: center;
  padding: 5px 10px;
  background: blue;
  z-index: 1;
}

.c2 {
  position: fixed;
  text-align: center;
  background: red;
  z-index: 2;
  cursor: pointer;
}