jQuery/Css 对居中按钮使用 z-index 和相对位置？

Question

我有一个位于另一个 div(容器)中心的按钮。单击该按钮时，其他一些 div 也会显示在此容器中。实际上它们在那里，但使用 css dipslay: none，并使用 jQuery 显示。

但是当您单击以显示这些 div 时，按钮会被从 div 中剔除。我明白为什么，但我认为我可以使用 z-index 将按钮固定在原位？

我的问题是，如何在不使用绝对位置的情况下将按钮保持在原位？

我不想使用绝对位置的原因是因为我想让它保持响应。如果我对按钮使用绝对值，则除了按钮之外的所有内容都是响应式的。如果这是废话，也请告诉我!

jsfiddle

CSS

#button {
    height:40px;
    width:100px;
    margin: -20px -50px;
    position:relative;
    top:50%;
    left:50%;
    z-index: 30;
}
#container {
    z-index: 2;
    height: 424px;
    width: 424px;
    background: black;
}
div.square {
    background: gray;
    padding: 0;
    margin: 3px;
    display: none;
    float: left;
    position: relative;
    width: 100px;
    height: 100px;
    z-index: 4;
}

HTML

<div id="container">
    <input type="button" value="show" id="button"></input>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>

JS

$('#button').bind('click', function () {

    $('.square').show();

});

Answer 1

如果将按钮的相对位置设置为-105px，则无需绝对定位即可

$('#button').bind('click', function () {

    $('.square').show();
    $(this).css('left', '-105px');

});

http://jsfiddle.net/axrwkr/yRGrL/5/