how to place div in front of a table element

Question

i am having trouble in placing my div in front of my table

here is my css for the div I want to pop up

#sc_div_option{
                width:300px;
                height:300px;
                border:solid gray 1px;
                display:none;
                position: fixed;
                float:right;
                background-color:green;
                z-index:99999999999999999999999999;
            }

and here is my table style

 #excel_table{
    width:auto;
    height:100%;
    background-color:#fff;
    min-height: 30%;
    z-index: -1;

 }

I already added z-index and position but does not work

appreciate your help

maybe you are wondering why I am doing this.. i want to have a menu list when I click one of my table data and pop up the div in front here is my jquery responsible for that

var mouseX;
var mouseY;
$(document).mousemove( function(e) {
   mouseX = e.pageX; 
   mouseY = e.pageY;
});  
$(document).on("click",".scname_value",function(){
     $('#sc_div_option').css({'top':mouseY,'left':mouseX}).fadeIn('slow');
})

Tingug sad tawn mo please bitaw ni...

here is my image to show the problem

Answer 1

Use this Javascript code: here is JSfiddle

<script>
function showCoords(event) {
var x = event.clientX;
var y = event.clientY;
var coords = "X coords: " + x + ", Y coords: " + y;
console.log(var);
var sc_div_option =  document.getElementById("sc_div_option");
sc_div_option.style.display = "block";
sc_div_option.style.top = y+"px";
sc_div_option.style.left = x+"px";
sc_div_option.innerHTML = coords;

}

Or use bootstrap modal. Here is JsFiddle You have to use bootstrap modal. You have to put tha div id as data-target attribute value . Assign the bellowed think as your div css attributes. And in the div add other divs content, header, footer. Enjoy!

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" > 
<script src = "https://code.jquery.com/jquery.js"></script>
    <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" > </script>
    <table border="1">
    <tr><td col>
     <p data-toggle="modal" data-target="#sc_div_option">Click Here11</p> 
    </td> <td>
     <p data-toggle="modal" data-target="#sc_div_option">Click Here12</p> 
    </td><td>
     <p data-toggle="modal" data-target="#sc_div_option">Click Here13</p> 
    </td><tr>
    <tr><td>
     <p data-toggle="modal" data-target="#sc_div_option">Click Here21</p> 
    </td><td>
     <p data-toggle="modal" data-target="#sc_div_option">Click Here22</p> 
    </td><td>
     <p data-toggle="modal" data-target="#sc_div_option">Click Here23</p> 
    </td><tr>
</table>


   <div class="modal fade" id="sc_div_option" tabindex="-1" role="dialog" aria-labelledby="id" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
          Header
          </div>
          <div class="modal-body"> 
             Body
            <div class="modal-footer">
             Footer
            </div>
          </div> 
        </div>
      </div>
    </div>

Answer 2

from my understanding , you want to show the popup on top of your table. for that you have to play with css position. I have fiddled the code here. you can refer that.parent div of your popup should be of position relative and position of popup should be absolute. and you can set the position from jquery as well as you did for now.

HTML

 <div class="table-wrapper">
    <table class="my-table">
        <tr>
            <td>hjskladj</td>
            <td>hjskladj</td>
            <td>hjskladj</td>
        </tr>
        <tr>
            <td>hjskladj</td>
            <td>hjskladj</td>
            <td>hjskladj</td>
        </tr>
        <tr>
            <td>hjskladj</td>
            <td>hjskladj</td>
            <td>hjskladj</td>
        </tr>
        <tr>
            <td>hjskladj</td>
            <td>hjskladj</td>
            <td>hjskladj</td>
        </tr>
    </table>
   <div class="my-popup">this is my div</div>
</div> 

CSS

.table-wrapper{
    position:relative;
}
.my-table td {
    padding:5px;
    border:1px solid #aaa;
}
.my-popup {
    width:100px;
    height:100px;
    position:absolute;
    background-color:red;
    bottom:0px;
    left:0px;
}

just try this and let me know if it works

Answer 3

Just basically set your z-indexes for your content div set z-index: 1 and for the div to pop up to z-index: 2

Answer 4

The CSS z-index property only works on positioned elements. The only issue you seem to have is that #excel_table doesn't have a position attribute. Just set it to relative or absolute (in your case, relative seems to be what you want).

Example of z-index with and without position attributes: https://jsfiddle.net/7zxgrb3k/1

var dir = document.querySelectorAll('div');
for(var i=0; i<dir.length; ++i) {
    dir[i].appendChild(document.createTextNode(dir[i].className));
}

.absolute { position: absolute; }
.relative { position: relative; }
.front { z-index: 10; }
.back { z-index: 0; }

div {
    display: inline-block;
    margin-right: -20px;
    
    background-color: #333;
    border: solid 4px #eee;
    border-left: solid 4px #e00;
    border-right: solid 4px #00e;
    color: #eee;
    
    width: 100px;
    height: 100px;
}

<div class="front"></div>
<div class="back"></div>
<div class="front"></div>
<br />
<br />
<div class="front relative"></div>
<div class="back relative"></div>
<div class="front relative"></div>
<br />
<br />
<div class="front absolute"></div>
<div class="back absolute"></div>
<div class="front absolute"></div>