0

我有一个table，我想要hide并show使用jQuery。我想在右上角添加一个“关闭”按钮。

但是关闭按钮总是出现在桌子后面，所以看不到

我怎样才能让关闭按钮出现在桌子前面（不是上面/侧面），因此可以点击？

<style>
table
{
    border: 3px solid #000000;
    align: center;  
    text-align: center;
    color:#000000;
}

th,td
{
    border-width: 2px;
    border-color: #000000;
    border-style: solid;
}

#RCLPage
{
    display:block;
    position:absolute;
    z-index:100;    
}

.close_box
{
    background-image:url('../tsTest2/images/close.gif');
    background-repeat:no-repeat;
    background-position:right top; 
    position:relative;
    z-index:101;
    //height:10px;
}

#CPSTab
{
    padding:10;
    width:20em; 
}

</style>


<div id="RCLPage">

    <div class="close_box"></div>

    <table id="CPSTab">
        <thead>
            <tr>
                <th colspan="2">The Header</th>
            </tr>
        </thead>
        <tbody>
            <tr><td>Item1</td><td>2</td></tr>
            <tr><td>Item2</td><td>5</td></tr>
            <tr><td>Item3</td><td>3</td></tr>
        </tbody>
    </table>    

</div>
4

4 回答 4

2

您需要添加z-index到 div，顶部 div 为正数，下面的 div 为负数

例子

于 2013-10-24T10:34:39.437 回答
1

将 .close_box 的位置更改为“绝对”

在这里摆弄：http: //jsfiddle.net/9kXmq/

position:absolute;
于 2013-10-24T10:38:04.913 回答
1

像这样给css

table{position:relative}

对于关闭按钮

.closeButton{ position:absolute; top:0; right:0; z-index:999}

您需要根据您的要求更改顶部和右侧的值

http://jsfiddle.net/Lubuu/5/

于 2013-10-24T10:40:03.420 回答
1

设置位置：相对；用于关闭按钮容器。设置位置：按钮的绝对位置。为两者设置 z-index（按钮的索引较高）。使用：对：0；顶部：0；按钮。

于 2013-10-24T10:36:41.327 回答