CODEWITHSUNDEEP
htmlcss
naveen
naveen

Reputation: 610

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>

Upvotes: 0

Views: 92

Answers (1)

Matt Kuhns
Matt Kuhns

Reputation: 1368

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>

Upvotes: 2

Related Questions