jQuery/Css使用z-index和居中按鈕的相對位置？

Question

我有一個位於另一個div（容器）中心的按鈕。 當按鈕被點擊時，其他一些div也出現在這個容器中。 其實他們在那裏，但與CSS dipslay：無，並顯示與jQuery。

但是，當您單擊以顯示這些div時，該按鈕會被敲出div。我明白爲什麼，但我認爲我可以使用z-index來保持按鈕到位？

我給你的問題是，我怎樣才能保持按鈕就位，而不必使用絕對位置？

我不想使用position絕對的原因是因爲我想保持它的響應。如果我使用絕對按鈕，除了按鈕，所有東西都是響應式的。 如果這是無稽之談，請讓我知道！

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/

Answer 2

有什麼本質上反應遲鈍有關的絕對定位的元素，你可以不用絕對定位。當元素在視口外部結束時，絕對定位成爲問題。在這裏使用絕對定位使您的演示不會比啓動時的響應速度快，因爲絕對定位相對於#container元素。

http://jsfiddle.net/yRGrL/4/

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