显示在滚动容器上的位置绝对div的CSS

Question

对于此问题，页面上有两个容器。每个设置为溢出：自动。

在上部容器（绿色）中，我们有一系列按钮。每个按钮切换一个弹出窗口（蓝色）的显示。无论上层容器的滚动位置如何，此蓝色容器都需要显示在下层容器的顶部（红色）。

我们通过将弹出窗口设置为绝对位置来获得部分路径，如本屏幕截图所示。

然而，当我们向下滚动，并进一步尝试点击这是以前隐藏它不是定位在按钮下方正确的按钮。

我想不需要按下按钮的Javascript计算的解决方案。我也不想使用固定位置，因为我希望弹出窗口保持在按钮下方，即使在页面大小调整时也是如此。

以下是重现此问题的代码。

function togglePopup(index) { 
 
    var element = document.getElementById('popup'+index); 
 

 
    if (element.style.display === 'none') { 
 
     element.style.display = ''; 
 
    } else { 
 
     element.style.display = 'none'; 
 
    } 
 
    }

.outerWrapper { 
 
    width: 200px; 
 
    height: 400px; 
 
    } 
 

 
    .upper { 
 
    height: 30%; 
 
    overflow:auto; 
 
    border: 1px solid green; 
 
    } 
 

 
    .lower { 
 
    height: 70%; 
 
    overflow: auto; 
 
    border: 1px solid red; 
 
    } 
 

 
    .row { 
 
    height: 70px; 
 
    } 
 

 
    .popup { 
 
    border: 1px solid blue; 
 
    background-color: white; 
 
    height: 100px; 
 
    width: 50px; 
 
    position:absolute; 
 
    }

<div class="outerWrapper"> 
 

 
    <div class="upper"> 
 
    <div class="row"> 
 
     <button onclick="togglePopup(1)">test</button> 
 
     <div class="popup" id="popup1" style="display:none"> 
 
     popup content 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <button onclick="togglePopup(2)">test</button> 
 
     <div class="popup" id="popup2" style="display:none"> 
 
     popup content 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <button onclick="togglePopup(3)">test</button> 
 
     <div class="popup" id="popup3" style="display:none"> 
 
     popup content 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="lower"> 
 

 

 
    </div> 
 

 

 
</div>

Answer 1

这里是一个可能的方法使用香草的javascript：

var buttons = document.getElementsByTagName('button'); 
 
var popups = document.getElementsByClassName('popup'); 
 

 
function togglePopup() { 
 

 
    var index = Array.prototype.indexOf.call(buttons,this); 
 

 
    var popup = popups.item(index); 
 
    getComputedStyle(popup,null).display === 'none' ? popup.style.display = 'block' : popup.style.display = 'none'; 
 

 
\t for (var i = 0; i < popups.length; i++) { 
 
\t \t if (i === index) {continue;} 
 
     var popup = popups[i]; 
 
     popup.style.display = 'none'; 
 
    } 
 

 
} 
 

 
for (var i = 0; i < buttons.length; i++) { 
 
    var button = buttons[i]; 
 
    button.addEventListener('click',togglePopup,false); 
 
}

.box, .box button { 
 
display: block; 
 
position: relative; 
 
} 
 

 
.box { 
 
width: 200px; 
 
overflow: auto; 
 
} 
 

 
.top { 
 
height: 120px; 
 
border: 1px solid rgb(0,191,0); 
 
} 
 

 
.bottom { 
 
height: 280px; 
 
border: 1px solid rgb(255,0,0); 
 
} 
 

 
.box button { 
 
margin-bottom: 60px; 
 
} 
 

 
.popup { 
 
display: none; 
 
position: absolute; 
 
top: 0; 
 
left: 0; 
 
background-color: rgb(255,255,255); 
 
border: 1px solid rgb(0,0,255); 
 
width: 50px; 
 
height: 100px; 
 
}

<div class="box top"> 
 
<button>test</button> 
 
<button>test</button> 
 
<button>test</button> 
 
</div> 
 

 
<div class="box bottom"> 
 
<div class="popup">popup 1 content</div> 
 
<div class="popup">popup 2 content</div> 
 
<div class="popup">popup 3 content</div> 
 
</div>