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

Question

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

到目前为止，我还没有在 Internet 上遇到过类似的解决方案，但我想知道是否可以不间断地创建它，两者都可以轻松点击，以及如何实现.

Answer 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>

Answer 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>

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

How can I create two clickable intersecting Images?

html

css

image

button