如何将 div 放在 table 元素前面

Question

我无法将 div 放在 table

前面

这是我的 css div 我想弹出

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

这是我的 table 风格

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

 }

我已经添加了 z-index 和位置但是不起作用

感谢您的帮助

也许你想知道我为什么要这样做.. 当我单击我的 table 数据之一并弹出前面的 div 时，我想要一个菜单列表，这是我的 jquery 负责的

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 拜托 bitaw ni...

这是我用来说明问题的图片

Answer 1

根据我的理解，您想在 table 顶部显示弹出窗口。为此，您必须使用 css 位置。我已经弄乱了代码here。你可以参考 that.parent div 你的弹出窗口应该是位置相对的，弹出窗口的位置应该是绝对的。您可以像现在一样从 jquery 设置位置。

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;
}

试试这个，如果有效请告诉我

Answer 2

CSS z-index 属性仅适用于定位元素。您似乎遇到的唯一问题是 #excel_table 没有位置属性。只需将它设置为 relative 或 absolute（在你的情况下，relative 似乎就是你想要的）。

带和不带位置属性的 z-index 示例：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>

Answer 3

使用此 Javascript 代码：这里是 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;

}

或使用bootstrap模态。 Here is JsFiddle 您必须使用 bootstrap 模态。您必须将 div id 作为数据目标属性值。将下面的想法分配给您的 div css 属性。并在 div 中添加其他 div 的内容、页眉、页脚。享受吧！

    <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 4

基本上只需为您的内容设置 z-index div 设置 z-index: 1 并让 div 弹出 z-index: 2

如何将 div 放在 table 元素前面

how to place div in front of a table element

html

javascript

css

jquery

css-position