Whenever I click on a div called "test", another div named "outside" appears, along with a div named "inside" that has a higher z-index.
The problem arises when I try to set the position of "inside" to absolute, as I am unable to assign a margin-bottom. And if I set the position to relative, it places my "test" div below it.
It may be a bit challenging to grasp, but the issue is quite simple. Here's a fiddle for reference: http://jsfiddle.net/malamine_kebe/QRpqs/
Here are my CSS styles:
#insideAbsolute{
background-color:#f8f8f8;
position: absolute;
top:0;
left:20%;
width:60%;
margin-top:35px;
margin-bottom:35px;
z-index:3;
border-radius: 7px;
box-shadow: 6px 6px 20px black;
}
#insideRelative{
background-color:#f8f8f8;
position: relative;
top:0;
left:20%;
width:60%;
margin-top:35px;
margin-bottom:35px;
z-index:3;
border-radius: 7px;
box-shadow: 6px 6px 20px black;
}
#outside{
position: fixed;
left:0;
top:0;
height: 100%;
width: 100%;
background-color: black;
opacity:0.7;
z-index:2;
background-attachment:fixed;
}
.test{
z-index:1;
}My HTML structure:
<div id="outside"></div>
<div id="insideAbsolute"></div>
<div id="insideRelative"></div>
<div class="testAbsolute">test position absolute</div>
<div class="testRelative">test position relative</div>And this is the jQuery code:
$('#outside').hide();
$('#insideAbsolute').hide();
$('#insideRelative').hide();
$(document).on('click', '.testAbsolute', function () {
$('#outside').show(0, function() {
$('#insideAbsolute').show(0, function() {
$(this).html('<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>');
$(document).on('click','#outside',function(){
$('#insideAbsolute').html('');
$('#outside').hide();
});
});
});
});
$(document).on('click', '.testRelative', function () {
$('#outside').show(0, function() {
$('#insideRelative').show(0, function() {
$(this).html('<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>');
$(document).on('click','#outside',function(){
$('#insideRelative').html('');
$('#outside').hide();
});
});
});
});