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

Question

我有一個位於另一個div（容器）中心的按鈕。 單擊該按鈕時，此容器中也會顯示其他一些div。 實際上，它們在那里，但帶有css dipslay：無，並與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/

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