用于显示滚动容器的位置绝对div的CSS

Question

对于此问题，页面上有两个容器。每个都设置为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

以下是使用vanilla 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';

	for (var i = 0; i < popups.length; i++) {
		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>