Question

我遇到了css popup的问题。我隐藏了span标签中的一些内容，并将其悬停在文本上时显示。但是存在重叠，第二行中的文本与弹出窗口重叠。弹出窗口的边框搞砸了。内容在this link上。我正在使用以下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;并为所有CSS标记添加了z-index。他们没有工作，我坚持了一天。

Answer 1

剪切弹出窗口的原因是因为这个CSS：

.dishname:hover {
    overflow: hidden;
}

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

接下来，z-index仅影响position属性不是static的元素。使用relative它们将呈现相同但z-index将产生效果。

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

定位问题（css弹出重叠）

1 个答案: