0

我有一个按钮位于另一个 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();

});
4

2 回答 2

2

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

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

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

});

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

于 2013-01-20T15:57:45.417 回答
1

绝对定位元素本身并没有什么反应迟钝的地方。当元素最终位于视口之外时，绝对定位会成为问题。在这里使用绝对定位使您的演示不比开始时响应慢，因为绝对定位是相对于#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;
}
于 2013-01-20T17:29:44.927 回答