My z-index not working

HTML-CSS
1

I was doing a 100 days css challenge and my z-index is not working (I want the shoe on the top of floor when they overlap).

<div class="frame">
  <div class="invisible-men">
    <div class="leg left">
      <div class="shoe"></div>
    </div>
    <div class="leg right">
      <div class="shoe"></div>
    </div>
  </div>
  <div class="floor"></div>
</div>

.frame{
  position:absolute;
  width:400px;
  height:400px;
  background:rgb(246,232,215);
  top:50%;
  left:50%;
  margin-top:-200px;
  margin-left:-200px;
  border-radius:2px;
  box-shadow:0 0 13px 0 rgba(0,0,0,0.3);
  overflow:hidden;
}

.floor {
  position:absolute;
  bottom:0px;
  left:0px;
  right:0px;
  top:235px;
  background:#232323;
  z-index:1;
}
.invisible-men {
	animation: fade-in .8s ease-out 1s;
	animation-fill-mode: both;
  z-index:2;
}

.leg {
	position: absolute;
	top: 0px;
	left: 147px;
	width: 151px;
	height: 245px;
	transform-origin:50% 0;
  z-index:2;
}
.shoe {
  position: absolute;
	width: 151px;
	height: 128px;
	left: 0;
	bottom: 0;
	background: url('http://100dayscss.com/codepen/doc-martens.svg');
	transform-origin: 0 95%;
  z-index:2;
}

.left {
  animation:leg 2s ease-in-out infinite;
  

}
.right {
	animation: leg 2s ease-in-out 1s infinite;
	
	
}
 .left .shoe {
    animation:shoe 2s ease-in-out infinite;
  }
 .right .shoe {
    animation:shoe 2s ease-in-out 1s infinite;
  }

@keyframes leg {
	0%, 100% {
		tranform:rotate(0deg) translateX(-10px);
	}
	50% {
		transform: translateY(-15px) translateX(30px);
	}
  

}

@keyframes shoe {
	0%, 100% {
		transform:rotate(0deg)
	}
	25% {
		transform: rotate(-15deg) translateY(0px) translateX(0);
	}
	
	75% {
		transform: rotate(3deg) translateY(-7.5px) translateX(30px);
	}
  
  
}


@keyframes fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

Please help me out, Thanks!

Edit: This is my pen https://codepen.io/ethn96/pen/MRdJbL

2

It will be helpful for us to look at if you have a demo via codepen.

3

It looks like this for me. How should it look like?

4

ye where do you want to see your shoe?
is that you want to see on black background or white. currently i can see that is on white background

5

i think this code might help you
do one thing just add your shoe class top property to 300 px
and make it position property relative

6

The solution is simple, but the explanation isn’t so much.

Simply place <div class='floor'> above <div class='invisible-men'>, and remove the z-index CSS rule from floor:

<div class='floor'></div>
<div class='invisible-men'>
  <!-- Child divs -->
</div>

Somebody with a better understanding of the CSS specification will be able to explain, but one of the factors affecting stacking order is the order in which the HTML elements are written. Since your floor div is below invisible-men, it would usually be on top in the stacking order.

I believe there are CSS rules that affect stacking order, such as transform, but it’s not yet clear to me how this would affect the order. There is a page that does a much better job at explaining this.

In the meantime, just switching the order of your <div>s should solve your issue.

8

This is my pen: https://codepen.io/ethn96/pen/MRdJbL Thanks!

9

This does work for me, thanks!