div上没有显示剪切路径CSS男性图片

Question

请帮助我解决此问题，当div在剪切路径上时，图像无法使用z-index。我如何通过z-index轻松拍摄图像

请检查我的代码：-

.mymap {
  background-image: url("https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg?auto=compress&cs=tinysrgb&h=350");
  background-repeat: no-repeat;
  -webkit-clip-path: polygon(100% 0, 100% 80%, 0 80%, 0 23%);
  clip-path: polygon(100% 0, 100% 80%, 0 80%, 0 23%);
}

.mymap {
  height: 220px;
}

.men img {
  width: 20%;
}

.men img {
  z-index: 999;
  position: relative;
}

<div class="mymap">
  <div class="men">
    <img src="https://i.pinimg.com/originals/1c/01/27/1c0127d19cdd75efb5a3eca4384658d5.png">
  </div>
</div>

这是codepen链接：-https://codepen.io/anon/pen/JaQoOX

请检查并告诉我如何解决此问题。

Answer 1

您需要将.mymap和.men类包装到父容器中，并将position:relative设置为.container类，将position:absolute设置为图像。

.container{
  position:relative;
}
.mymap {
  background-image: url("https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg?auto=compress&cs=tinysrgb&h=350");
  background-repeat: no-repeat;
  -webkit-clip-path: polygon(100% 0, 100% 80%, 0 80%, 0 23%);
  clip-path: polygon(100% 0, 100% 80%, 0 80%, 0 23%);
}

.mymap {
  height: 220px;
}

.men img {
  width: 20%;
}

.men img {
  z-index: 999;
  position: absolute;
  top:0;
}

<div class="container">
  <div class="mymap"></div>
  <div class="men">
      <img src="https://i.pinimg.com/originals/1c/01/27/1c0127d19cdd75efb5a3eca4384658d5.png">
   </div>
</div>