Question

我有一个表格，其中每个单元格都有一些文本。我想要一个div来弹出并覆盖表格但是当div弹出时，它会覆盖表格的边框，但不包括文本。它看起来好像在div上的文本。我玩过背景颜色和不透明度，但似乎没有任何效果。任何人都可以帮助我吗？

P.S。无论如何我无法让桌子消失，因为重叠的div最终会消失。

Answer 1

由于你没有发布你的代码，我将假设问题与

有某种关系

z-index:*;

所以我创建了一个小提琴，您可以在其中更改z-index并查看使用此代码的差异。

<html>
<head>
<style>
p{
    margin:0;
    position:relative;
    z-index:3;
}
table, div{
    width:100px;    
    height:100px;
}
div{
    background-color:blue;
    position:relative;
    top:-100px;
    z-index:2;
}
</style>
</head>
<body>
<table border="1">
    <tr>
        <td><p>1</p></td>
        <td><p>2</p></td>
    </tr>
    <tr>
        <td><p>3</p></td>
        <td><p>4</p></td>
    </tr>    
</table>
</body>
</html>

JsFiddle

请注意，必须设置z-index到工作位置，如此

position:relative;

或

position:absolute;

或

position:fixed;

虽然我不认为修复可能符合您的需求。

Answer 2

你的问题没有清除。

我希望如此，这就是你要求的......

<强> HTML

<table cellspacing="0">

    <tr>
        <td>Hellossss
            <span></span>
        </td>
         <td>English
          <span></span>
        </td>  
         <td>French
          <span></span>
        </td>          

    </tr>




</table>

<强> CSS

table td{ border:3px grey solid; padding:0px; position:relative; width:100px}
span{content:"";position:absolute; width:100%;height:98%; background:green; 
left:0;top:0; display:none}
td:hover span{display:block}

<强> http://jsfiddle.net/edBQh/

文本进入重叠div？

2 个答案: