Question

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

我在列方向上有两个方框。在第一列中，我有一个用于打开popUp的按钮。 popUp应该

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

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

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

感谢您的帮助。

Answer 1

<强> CSS

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

<强> demo

Answer 2

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

JQuery - Position Popup in relative to button(s)

int[] a = new int[] {1,2,3,4,5,6,7,8,9,10};

b0 = a1,a2,a3
b1 = a4,a5,a6 
b2 = etc...

http://jsfiddle.net/vefjb4f5/

Answer 3

对我来说，最快的方法是将它放在包含以下css的包装中：

    <include
        layout="@layout/app_bar_five_designers"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

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

修改

进一步说明：

道歉，但这里包装的关键是我将.popwrap{ border:1px solid red; padding:1px; position:static; display:inline-block; }设置为 .popwrap 。这基本上是static的“默认”值（也称为initial）。

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

在这里，这不是唯一的事情。您还希望孩子的“弹出”元素不会干扰周围任何其他元素的流动或定位。您需要将弹出元素设置为“position”。

有关堆叠背景和示例中的因素的进一步阅读，我邀请您访问以下链接：

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

https://developer.mozilla.org/en-US/docs/Web/CSS/position

https://css-tricks.com/almanac/properties/p/position/

此时我已经醒了大约36个小时，（长项目）但是如果这个解释不清楚，我会很高兴在我睡觉后再给它一个刺。

PopUp不会出现在按钮下方

3 个答案:

进一步说明：