具有flex div的z-index普通div [重复]

Question

此问题已经在这里有了答案：

• Why does z-index not work?4个答案

我正在尝试在4个块的顶部放置一个按钮。这些块位于样式为[[display：flex。]的div中。但是z-index样式不适用于该按钮。另外，如果我给块以正数，但少于按钮z-index，则按钮将隐藏在所有块下。

我知道我可以给块加上z-index，但是在我的项目中，它将引起其他问题。因此，我想知道对它们进行样式设置的最佳方法是什么。

.block{
  flex:1;
  padding: 10px;
  border: 2px solid #666999;
  margin: 0 10px 10px 0;
}
#btn_box{
  margin-top: -20px;
  margin-bottom:-15px;
  z-index: 999;
  text-align: center;
}
#btn_box a{
  display: inline-block;
  background: #ff9999;
  padding: 5px 10px;
}
#btn_box + div{
  z-index: 1;
}

<div style='position:relative;'>
  <div style='display:flex;'>
    <div class='block'>1</div>
    <div class='block'>2</div>
  </div>

  <div id='btn_box'>
    <a>TestButton</a>
  </div>

  <div style='display:flex;'>
    <div class='block'>3</div>
    <div class='block'>4</div>
  </div>
</div>

另请参见此处：https://jsfiddle.net/w4o8afts/

我有一种解决方法，将按钮框设置为flex div，但是这样做很奇怪。

我正在尝试在4个块的顶部放置一个按钮。这些块在div内，其样式为display：flex。但是z-index样式不适用于该按钮。另外，如果我给出正数但小于...

Answer 1

添加position:relative