別の div (コンテナ) の中央に配置されたボタンがあります。ボタンをクリックすると、他の div もこのコンテナーに表示されます。実際にはそこにありますが、css dipslay: none があり、jQuery で表示されます。
しかし、これらの div をクリックして表示すると、ボタンが div からノックアウトされます。理由はわかりますが、z-index を使用してボタンを所定の位置に保持できると思いましたか?
あなたへの私の質問は、絶対位置を使用せずにボタンを所定の位置に保つにはどうすればよいですか?
絶対位置を使用したくない理由は、応答性を維持したいからです。ボタンにabsoluteを使用すると、ボタン以外はすべて反応します。これがナンセンスである場合は、私にも知らせてください!
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();
});