如何将两个元素放在彼此的顶部？答案

【问题标题】：How to position two elements centered on top of each other?如何将两个元素放在彼此的顶部？
【发布时间】：2015-08-14 15:45:49
【问题描述】：

问题：我有一个表单，下面有一个按钮，可以使用 jQuery ajax() 从数据提交（发布）。我希望在服务器 ajax 调用期间将按钮替换为微调器（动画 png）。但是这样一个微不足道的任务在 css 中是不可能做对的。

我尝试过的：我已将按钮和图像放在引导行中。 Ox ajax 调用我已将按钮显示设置为无，将 img 显示设置为阻止。但是因为这两个大小不一样导致整个页面闪烁，打断其他元素的定位等等。

另一个想法是尝试以绝对定位将两个元素放在彼此之上。但是，像 css 一样愚蠢，我不能将它放在行的中间。

有没有办法将两个元素放在一起，以便我可以控制它们的可见性？请记住，我不能以像素为单位使用绝对位置，因为这是一个网页，我不知道浏览器的宽度，图像将来会改变，按钮中的文本将来会改变，所有这些事物影响绝对大小。如果我的问题有另一种解决方案可以防止页面上下跳跃，那也很棒。

编辑链接到小提琴实验之一： https://jsfiddle.net/ofb2qdt8/

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

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

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

实验 2： https://jsfiddle.net/ofb2qdt8/

.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 的顶部。高度较小的元素应该居中。

【问题讨论】：

你需要给我们看一些代码。
你的代码可以解释更多关于你的要求，所以试着添加一些小提琴来讨论更多关于你的问题
我已经尝试了可能的变化，但我认为发布它没有什么意义，因为它会增加混乱。但我会编辑问题并添加小提琴链接到我尝试过的一些非工作的东西。
因为这个问题根本没有很好的解释。 jsFiddle 似乎完全无关紧要。

标签： javascript jquery html css

【解决方案1】：

查看此工作演示：https://jsfiddle.net/ofb2qdt8/3/

添加几行 jquery 并更新您的 css。

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

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

###JQUERY

$(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);
  });
});

###CSS

.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;
}

【讨论】：

【解决方案2】：

粗略、准备就绪且未经测试：

HTML

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

CSS

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

jQuery

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

Ajax 调用完成后逆向上面的 jQuery。

【讨论】：

正如我的问题所述，这是错误的。这会导致页面闪烁，改变页面上其他元素的位置等等。这是我尝试的第一件事。这只有在按钮和微调器图像占据与像素完全相同的高度时才可行。

【解决方案3】：

由于我无法找到可行的解决方案，因此我恢复了最初放弃的第一个想法。虽然有点曲折。

HTML

<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();
}

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

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

【讨论】：