PopUp 不会出现在按钮下方答案

【问题标题】：PopUp does not appear below the buttonPopUp 不会出现在按钮下方
【发布时间】：2016-06-13 21:32:42
【问题描述】：

我最近开始使用 css flexbox 设计并偶然发现了一个问题。

我在列方向上有两个框。在第一列中，我有一个打开弹出窗口的按钮。弹出窗口应该

在按钮正下方打开
应该覆盖第二个框

但我只能让这两件事中的一件发挥作用，而不能同时发挥作用。

html:

    <div class="container">
  <div class="item">
    <input type="button" id="toggle" value="pop up" onclick="togglePopUp()"/>
    <div class="popup" id="pop" style="display: none">
      <input type="button"  id="toggle" class="close" value="close" onclick="togglePopUp()"/>
    </div>
  </div>
  <div class="item">
  </div>
</div>

js:

function togglePopUp() {
  if (document.getElementById('pop').style.display == "block") {
    document.getElementById('pop').style.display = "none";
  } else {
    document.getElementById('pop').style.display = "block";
  }
}

css:

.popup {
  background-color: #000;
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 10;
}

.close {
  float: left;
  color: red;
}

.container {
  display: flex;
  flex-direction: column;
}

.item {
  overflow: scroll;
  border: 3px solid #73AD21;
}

感谢您的帮助。

【问题讨论】：

我已经为我的答案添加了额外的解释。如果之前不清楚，我深表歉意

标签： javascript html css popup flexbox

【解决方案1】：

对我来说，最快的方法是将其放入具有以下 css 的包装器中：

.popwrap{
  border:1px solid red;
  padding:1px;
  position:static;
  display:inline-block;
}

以下是您的实际工作演示： http://codepen.io/anon/pen/MeKGQL

编辑：

进一步说明：

抱歉，这里封装的关键是我将.popwrap 的位置设置为static。这本质上是position 的“默认”（也称为initial）值。

为了以预期的方式正确地将 z-index 应用于元素，您需要将位置应用于该元素。这就是浏览器如何为页面上的元素提供各种层的方式。

这不是唯一起作用的，这里。您还希望有一个子“弹出”元素不会干扰它周围任何其他元素的流动或定位。您需要将弹出元素设置为“absolute”。

如需进一步了解堆叠上下文和示例中的影响因素，我邀请您访问以下链接：

此时我已经醒了大约 36 个小时，（长期项目）但如果这个解释不清楚，我很乐意在我睡觉后再试一次。

【讨论】：

嗨 MassDebates，这是有效的。但是请您再详细解释一下好吗？
我很抱歉，是的，我会在我的答案的编辑中详细解释。

【解决方案2】：

css

.popup {
    background-color: #000;
    height: 100px;
    left: 43%;
    position: fixed;
    top: 31%;
    width: 100px;
    z-index: 10;
}

demo

【讨论】：

这不是动态工作的。例如调整窗口大小。
虽然这段代码 sn-p 可以解决问题，including an explanation 确实有助于提高您的帖子质量。请记住，您正在为将来的读者回答问题，而这些人可能不知道您的代码建议的原因。也请尽量不要用解释性的 cmets 挤满你的代码，这会降低代码和解释的可读性！

【解决方案3】：

请访问以下链接。我认为您可以解决您的问题。

JQuery - Position Popup in relative to button(s)

and see the following demo.

http://jsfiddle.net/vefjb4f5/

【讨论】：

我不喜欢这个 jsfiddle 的解决方案。 Ctrl + Scroll（更改浏览器缩放）混淆了弹出元素相对于按钮的定位。