行为的溢出汽车和可见

混合我有HTML结构行为的溢出汽车和可见

<div class="PapaDiv"> 
    <input type="checkbox"/> 
    <label></label> 
    <div class="ChildDiv"> 
    <input type="radio"/><label></label> 
    <input type="radio"/><label></label> 
    <input type="radio"/><label></label> 
    </div> 
    <br/> 
</div>

这种动物被构建动态服务器侧根据数据。这有点像嵌套菜单。当用户使用标签将复选框悬停时，ChildDiv会显示在旁边。 PapaDiv具有overflow-y：定义了自动和最大高度。所以，如果有很多复选框，PapaDiv会得到一个垂直滚动条。这是想要的行为。现在，如果将鼠标悬停在底部的复选框上，其ChildDiv也会显示在PapaDiv中（overflow-y：auto）。企业希望将其显示在PapaDiv之上，为此我必须设置overflow-y：visible。这是这里的困境。我需要两种行为的组合。我需要ChildDiv在PapaDiv外部显示，并且同时其他的孩子在显示滚动条的时候会显示内容，如果有很多的话。任何解决方案或我拧？：）谢谢。

编辑：我不认为这将有助于多，但肯定的是，这里是CSS：

.ChildDiv{ 
    background-color: #EDF1F9; 
    border: 1px solid #557AB5; 
    display: none; 
    max-height: 200px; 
    overflow-y: auto; 
    padding: 10px; 
    position: absolute; 
} 

.PapaDiv{ 
    background-color: #FFFFFF; 
    border: 1px solid #557AB5; 
    box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.3); 
    left: 0; 
    max-height: 300px; 
    overflow-y: auto; 
    padding: 0.5em; 
    position: absolute; 
    top: 0; 
    width: 98%; 
    z-index: 501; 
} 

PapaDiv's parent div { 
    position: relative; 
    width: 100%; 
}

编辑：什么原因显示出来，是因为有显示：无在CSS。涉及JavaScript。对于这些元素，在复选框或其标签上的鼠标悬停时，ChildDiv会显示（jQuery $（'。ChildDiv'）。show（））。从ChildDiv或PapaDiv中输出鼠标：$（'。ChildDiv'）。hide（）。此外，还有一个简单的计算，可以为ChildDiv设置“top”和“left”属性，使其显示在其复选框旁边。 ChildDiv已经被定义为position：absolute;

来源

2012-09-10 Dimskiy

这将是真正的帮助，如果您将添加一些CSS：P – Ddorda

@Dimskiy，如果这个代码被渲染为是（对于例如jsfiddle：http://jsfiddle.net/Pkbc2/），没有任何显示。我怀疑你的代码使用了一点Javascript来显示任何东西 - 除非你向我们展示代码，否则很难想象你的问题可能需要解决。可能是一个JS的东西，可能是一个CSS的东西，但我们需要知道！ – Barney

Dimskiy之前我也有同样的问题。当鼠标悬停在图像上时，我试图创建一个放大镜。我发现父div，在这种情况下#PapaDiv必须定位相对而子div，在这种情况下，#ChildDiv绝对定位。

我看到#PapaDiv的父项在哪里相对位置，但如果我记得，我必须相对定位子元素的直接父项。

试试这个：

#PapaDiv { 
    position: relative; 
} 
#ChildDiv { 
    position: absolute; 
}

当然你也可以添加所有其他附加的CSS在那里为好。

下面的链接是我曾经帮助我的帖子：
How to overlay one div over another div

来源

2012-09-18 16:36:30 War10ck

行为的溢出汽车和可见

回答

相关问题