定位问题（CSS弹出窗口重叠）

Question

我的 css 弹出窗口有问题。我隐藏了跨度标签中的一些内容，并在将鼠标悬停在文本上时显示它。但存在重叠，第二行中的文本与弹出窗口重叠。而且弹出窗口的边框很乱。内容位于 此链接。我正在使用以下 css：

 .rest-cat 
 {  
clear: both;
padding: 3px 40px 0 0!important;
width: 600px;
 }
.rest-menuitem 
{
position: static;

float: left;
width: 254px;
padding: 3px 5px 0 0!important;
border-top: 1px dotted #DDD;
}

.dishname{
position: absolute;
z-index: 0;
float: left;
width: 229px;
 }

.dishprice{
position: relative;
float: right;
width: 25px;
 }



.product
{
    width: 600px;
padding: 0px 0px 20px 20px!important;

} 

.dishname span
{
display: none;
text-decoration: none;
}

.dishname:hover 
{
overflow: hidden;
text-decoration: none;
}

.dishname:hover span
{
display: block;
position: static;
top: 0px;
left: 170px;
width: 320px;
margin: 0px;
padding: 10px;
color: #335500;
font-weight: normal;
background: #e5e5e5;
text-align: left;
border: 1px solid #666;
z-index: 200;
}

有一个简单的解决方案吗？我已经尝试过使用position:relative;并将 z-index 添加到所有 CSS 标签中。它们不起作用，我被困在上面一天了。

Answer 1

你的弹出窗口被裁剪的原因是因为这个CSS：

.dishname:hover {
    overflow: hidden;
}

删除它将是一个很好的起点。

接下来，z-index 仅影响具有 position 属性（除 static）之外的元素。使用relative，它们将呈现相同的效果，但 z-index 会产生影响。

之后，有很多不同的事情可能会影响分层，我会像 @Michael Rader 所说的那样开始清理你的 HTML，你有很多不必要的包装器。