Question

我无法将我的div放在桌子前面

这是我想要弹出的div的css

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

这是我的桌子风格

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

 }

我已经添加了z-index和position但不起作用

感谢您的帮助

也许你想知道我为什么这样做.. 当我点击我的一个表格数据并在前面弹出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 please bitaw ni ...

这是我的图像来显示问题

Answer 1

根据我的理解，您希望在桌面上显示弹出窗口。因为你必须玩css位置。我弄乱了代码here。你可以参考那个.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没有位置属性。只需将其设置为相对或绝对（在您的情况下，相对似乎是您想要的）。

有和没有位置属性的z-index示例：https://jsfiddle.net/7zxgrb3k/1

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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模态。您必须将tha div id作为data-target属性值。将咆哮的思想指定为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

基本上为您的内容div设置z-index：1设置z-index，并为div弹出z-index：2

如何将div放在表元素前面

4 个答案: