顯示在滾動容器上的位置絕對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>