CSS für Position absolute div zeigt über Scroll-Container

Question

Für dieses Problem gibt es zwei Container auf der Seite. Jeder ist auf Überlauf eingestellt: auto.

Im oberen Container (grün) haben wir eine Reihe von Buttons. Jede Schaltfläche schaltet die Anzeige eines Popups (blau) um. Dieser blaue Container muss unabhängig von der Scrollposition des oberen Containers oben auf dem unteren Container (rot) angezeigt werden.

Wir bekommen einen Teil des Weges, indem wir das Popup auf Position: absolut stellen, wie in diesem Screenshot zu sehen ist.

Wenn wir jedoch weiter nach unten scrollen und versuchen, auf eine Schaltfläche klicken, die vorher versteckt war es nicht richtig unter der Taste positioniert.

würde ich eine Lösung wie die nicht Javascript Berechnung auf Tastendruck erfordern. Ich möchte auch nicht die Position fixed, da ich möchte, dass das Popup unter der Schaltfläche auch bei Seitengröße bleiben.

Hier ist der Code, um dieses Problem zu reproduzieren.

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

Hier ist ein möglicher Ansatz mit Vanille-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>