I am trying to create a toggle effect for an information table that needs to be displayed above another DIV. I have managed to achieve this using z-index and position:absolute, but I am wondering if there is a way to do it without using absolute positioning. I attempted to use position:relative, but it did not work as expected.
Here is the simple code I have so far:
HTML
<div id="btnDiv"></div>
<table id="infoTable">
<tr>
<td>Objective Details</td>
<td>Add task(btn) Image</td>
</tr>
</table>
<div class="content">CONTENT</div>
CSS
#infoTable{
display: none;
position: relative;
z-index: 10;
}
#btnDiv{
width: 20px;
height: 20px;
background-color: green;
float: right;
}
.content{
width:100%;
height:700px;
background-color: blue;
}
jQuery
$("#btnDiv").click(function showNewDiv(){
$('#popIn').show();
$("#popIn").css("z-index", 1);
});
Cheers!