Question

我有一个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>

Answer 1

您需要将z-index添加到div中，顶部div为正数，div为负数

example

Answer 2

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

Answer 3

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

在这里小提琴：http://jsfiddle.net/9kXmq/

position:absolute;

Answer 4

像这样给css

table{position:relative}

关闭按钮

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

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

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

使用CSS使关闭按钮在另一个元素前面可见

4 个答案: