位置絶対divのスクロールコンテナ上に表示されるCSS

Question

この問題では、ページに2つのコンテナがあります。それぞれはoverflow：autoに設定されています。

上部のコンテナ（緑色）には一連のボタンがあります。各ボタンはポップアップ（青色）の表示を切り替えます。この青いコンテナは、上のコンテナのスクロール位置に関係なく、下のコンテナ（赤色）の上に表示する必要があります。

このスクリーンショットのように、ポップアップをposition：absoluteに設定することで、そこに行く途中に入ることができます。

しかし、我々はさらに下にスクロールし、以前にそれが正しくボタンの下に配置されていない隠されたボタンをクリックしようとします。

私は、ボタンを押して上の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>