0

I am trying to put a button on top of 4 blocks. Those blocks are inside divs with style display:flex.

But the style is not working on the button. Alse, if I give positive but less than the button to the blocks, the button hides under all the blocks.

I know I can give negative to the blocks, but in my project it will cause other problem. So I am wondering what's the best way to style them.

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

See also here: https://jsfiddle.net/w4o8afts/

I have a workaround by making the button box a flex div, but it feels strange to do so.

Kakus.W
  • 63
  • 5

1 Answers1

3

Add position:relative

#btn_box{
  position:relative;
  margin-top: -20px;
  margin-bottom:-15px;
  z-index: 999;
  text-align: center;
}
Areg
  • 1,414
  • 1
  • 19
  • 39
  • 1
    I was about to add the same thing. Needs `position:relative;` – Andrew Oct 18 '19 at 09:53
  • I know z-index shoud work with postion, so I give ```position:relative``` to the first div, but it isn't working as I wish . Does it mean the z-index div must have a position? – Kakus.W Oct 19 '19 at 10:16
  • @Kakus.W `z-index` only works on `positioned elements` (position: `absolute`, position: `relative`, position: `fixed`, or position: `sticky`) – Areg Oct 19 '19 at 11:40