0

別の div (コンテナ) の中央に配置されたボタンがあります。ボタンをクリックすると、他の div もこのコンテナーに表示されます。実際にはそこにありますが、css dipslay: none があり、jQuery で表示されます。

しかし、これらの div をクリックして表示すると、ボタンが div からノックアウトされます。理由はわかりますが、z-index を使用してボタンを所定の位置に保持できると思いましたか?

あなたへの私の質問は、絶対位置を使用せずにボタンを所定の位置に保つにはどうすればよいですか?

絶対位置を使用したくない理由は、応答性を維持したいからです。ボタンにabsoluteを使用すると、ボタン以外はすべて反応します。これがナンセンスである場合は、私にも知らせてください!

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 に答える