One issue I am facing is with a button that is located in the center of another div (container). When the button is clicked, some hidden divs appear within this container. Although they are present but initially set to display: none using CSS, and then shown using jQuery.
However, when these divs are displayed, the button is pushed out of the container. I know this is happening due to the layout, but I was thinking of using z-index to prevent it from moving?
Can you suggest a way to keep the button in place without resorting to using position absolute?
I prefer not to use position absolute because I want the layout to remain responsive. Using absolute for the button messes up the responsiveness. If this approach doesn't make sense, please let me know!
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();
});