如何创建两个可点击的相交图像？答案

【问题标题】：How can I create two clickable intersecting Images?如何创建两个可点击的相交图像？
【发布时间】：2021-09-22 08:59:43
【问题描述】：

我想制作两张可点击的图片，一张用于视频，一张用于 PDF。它们会相交，并且 PDF 按钮位于 Video 按钮后面，如下图所示：

到目前为止，我还没有在互联网上遇到类似的解决方案，但我想知道是否可以在没有任何中断的情况下创建它，两者都可以轻松点击，以及我如何做到这一点。

【问题讨论】：

我想这就是你要找的答案：stackoverflow.com/a/1997397/12772355

标签： html css image button

【解决方案1】：

分别在视频和 pdf 上使用位置 relative 和 absolute 并将它们包装在使用 position :relative 的容器中

这应该可以解决问题：

.container {
/* What you need */
position : relative;

/* the code below is only for this example */
width : 300px;
margin-top : 150px;
}

.video {
/* What you need */
position : relative;
z-index : 2;

/* the code below is only for this example */
width : 300px;
height : 300px;
display : flex;
align-items : center;
justify-content : center;
text-align : center;
background-color : red;
}

.pdf {
/* What you need */
position : absolute;
top : -100px; /* change value to desired position */
right : -100px; /* change value to desired position */
z-index : 1;

/* the code below is only for this example */
width : 150px;
height : 200px;
display : flex;
align-items : center;
justify-content : center;
text-align : center;
background-color : blue;

}

<div class="container">
 <div class="pdf">pdf</div>
<div class="video">video</div>
 
</div>

【讨论】：

【解决方案2】：

绝对位置和 z-index 的组合可以满足需要：

#video {
  left: 100px;
  top: 75px;
  width: 250px;
  height: 150px;
  z-index: 10;
  background: lightblue;
}
#pdf {
  left: 300px;
  top: 25px;
  width: 75px;
  height: 100px;
  z-index: 1;
  background: red;
}
.tile {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div id = 'video' class = 'tile'>VIDEO</div>
<div id = 'pdf' class = 'tile'>PDF</div>

【讨论】：