z-index normal div with flex div

Question

我想在 4 个方块上放置一个按钮。这些块位于 div 内，样式为 display:flex.

但是z-index style is not working on the button. Alse, if I give positive but less than the button 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，但这样做感觉很奇怪。

Answer 1

添加position:relative

#btn_box{
  position:relative;
  margin-top: -20px;
  margin-bottom:-15px;
  z-index: 999;
  text-align: center;
}

z-index normal div with flex div

z-index normal div with flex div

css

z-index