Javascript 按钮下方不会出现弹出窗口

我最近开始使用css flexbox设计，但遇到了一个问题

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

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

但我只能让这两件事中的一件起作用，而不能两者兼而有之

html:

css:

谢谢你的帮助。

css

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

---

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

---

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

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

以下是您实际工作的演示：

编辑：

进一步解释： 抱歉，但是这里包装的关键是我将

.popwrap

的位置设置为

静态

。这本质上是

位置

的“默认”（也称为

初始

）值

为了以预期的方式将z索引正确应用于元素，您需要将位置应用于该元素。这就是浏览器如何将不同的层添加到页面上的元素

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

absolute

”

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

---

在这一点上，我已经醒了大约36个小时，（这是一个漫长的项目），但如果这个解释不清楚，我很乐意在睡觉后再尝试一下

这不是动态工作。e、 调整窗口的大小。虽然这个代码片段可以解决这个问题，但它确实有助于提高文章的质量。请记住，您将在将来回答读者的问题，这些人可能不知道您的代码建议的原因。还请尽量不要用解释性注释挤满你的代码，这会降低代码和解释的可读性！我不喜欢这个JSFIDLE的解决方案。Ctrl+Scroll（更改浏览器缩放）会弄乱弹出元素相对于按钮的位置。您好，这正在工作。但是你能解释得更详细一点吗？我很抱歉，是的，我会在我的答案的编辑中解释得更多。我已经在我的答案中添加了额外的解释。如果之前不清楚，我道歉

.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;
}

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

and see the following demo.

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