z-index not working with absolute positioning of elements

I am creating a component like the stacked cards, I am having all cards positioning as absolute but facing issues with z-index property, The cards doesn't seem to change with respect to z-index.

<div style="display:flex;justify-content:center;position:relative">
  <div style="height:180px;width:280px;background-color:green;position:absolute;top:70px;z-index:100;box-shadow: 0px 0px 12px 0px black"/>
    <div style="height:180px;width:260px;background-color:blue;position:absolute;top:-20px;z-index:99;left:10px;box-shadow: 0px 0px 2px 0px black"/>
      <div style="height:180px;width:240px;background-color:red;position:absolute;top:-20px;z-index:98;left:10px;box-shadow: 0px 0px 2px 0px black"/>
        <div style="height:180px;width:220px;background-color:yellow;position:absolute;top:-20px;z-index:97;left:10px;box-shadow: 0px 0px 2px 0px black"/>
</div>                                                         

1 answer

  • answered 2019-10-15 17:08 Matt Kuhns

    The div closure is wrong, but so is the positioning. Take out the left and make the top go up by the number of pixels that you want overlapped.

    <div style="display:flex;justify-content:center;position:relative">
      <div style="height:180px;width:280px;background-color:green;position:absolute;top:70px;z-index:100;box-shadow: 0px 0px 12px 0px black"></div>
      <div style="height:180px;width:260px;background-color:blue;position:absolute;top:65px;z-index:99;box-shadow: 0px 0px 2px 0px black"></div>
      <div style="height:180px;width:240px;background-color:red;position:absolute;top:60px;z-index:98;box-shadow: 0px 0px 2px 0px black"></div>
      <div style="height:180px;width:220px;background-color:yellow;position:absolute;top:55px;z-index:97;box-shadow: 0px 0px 2px 0px black"></div>
    </div>