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

Question

我有一个表，我想使用jQuery隐藏和显示。我想在右上角添加一个“关闭”按钮。

但是关闭按钮总是出现在表格后面，所以不可见

我怎样才能让关闭按钮出现在 table 前面(而不是上面/侧面)，因此可以点击？

<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

需要在div中添加z-index，正数为正数，下方为负数

example