Question

我有一组元素，每个元素都包含一个带有更详细数据集的子元素。仅当您将鼠标悬停在父元素上时，详细数据才会显示。

当我第一次对其进行编码时，我将子数据与父数据放在同一级别上，因此它具有相当大的空间，并且可以相对于祖父级容器的顶部位置。 The red box (aging_detailed_breakdown) only shows when one of the black boxes (aging_line) is hovered over.

但事实证明，红色框可能会包含大量数据并需要滚动条。为了使用滚动条，我将红色框放在每个黑框中。现在我遇到了定位问题。

如果我将它定位为绝对位置，它会定位到每个黑盒子的水平，所以较低的悬停元素非常低，看起来像这样： cut off element

所以我尝试修复，当页面滚动到顶部时看起来很好。但是如果向下滚动，悬停元素会跟随你，而不是它的位置。

有什么想法吗？我希望那个div代替它，即使你向下滚动。

我在一家不愿意分享代码的公司工作，这是我可以分享的内容：

＆＃13;

.aging_detailed_breakdown {
    display: block;
    width: 156px;
    position: fixed;
    background: white;
    float: left;
    z-index: 1;
    top: 79px;
    left: 1367px;
    height: 188px;
    overflow: auto;
    padding: 10px;
}

.aging_detailed_breakdown.hidden{
    display: none;
}

＆＃13;

<div class="aging_line">     
    <div class="ib age_count">{!customerAnalyze.over0count}
        <div class='aging_detailed_breakdown hidden'>
        </div>
    </div>
</div>

<div class="aging_line">     
    <div class="ib age_count">{!customerAnalyze.over0count}
        <div class='aging_detailed_breakdown hidden'>
        </div>
    </div>
</div>

<div class="aging_line">     
    <div class="ib age_count">{!customerAnalyze.over0count}
        <div class='aging_detailed_breakdown hidden'>
        </div>
    </div>
</div>

<div class="aging_line">     
    <div class="ib age_count">{!customerAnalyze.over0count}
        <div class='aging_detailed_breakdown hidden'>
        </div>
    </div>
</div>

＆＃13;

仅在悬停时显示的元素的位置集

0 个答案: