CSS - 即使页面滚动，中心弹出 div 也位于中间

Question

我试图在屏幕中间居中显示一个弹出式 div，它并不适用于所有情况。

我有一个列表，其中列代表每天的时间，行代表广播 channel ，所以让我们假设在当前视口(viewport)上只有 10 个 radio channel 可以适合并且每当用户点击一个 channel 时，弹出窗口会显示一些信息。

到现在为止一切都很好，弹出窗口居中，因为我想要，但是如果我向下滚动到例如 channel (行)20-30 等...并单击，弹出窗口不会出现在屏幕中央，而是出现在它第一次出现的位置的正上方...

我认为总是一直向上滚动以查看信息很烦人，有没有办法修复此 div，使其始终显示在屏幕中间，而不管滚动(行位置)如何？

这是 Div CSS:

#DescriptionDiv{
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    padding: 16px;
    border: 3px solid orange;
    background-color: white;
    z-index:1002;
    overflow: auto;
}


#TableWrapper{
     width : 900px;
     height: 600px;
} // the Parent Div of the listing



<div id="TableWrapper" >
    <div id="DescriptionDiv">
        <span id="DescClose"><i class="fa fa-times"></i></span>
        <h6 id="DesTitle"></h6>
        <span id="Time"></span>
        <div id="Desc"></div>
    </div>
</div>

谢谢

Answer 1

改变

position: absolute;

到

position: fixed;

固定位置将防止它与其余内容一起滚动。 [MDN]