How can I create two clickable intersecting Images? - html

Question

I'd like to make two clickable images, one for video and one for PDF. They would be intersecting, and the PDF button is behind the Video button, just like in the image below:
So far, I haven't come across a similar solution on the internet, but I'd like to know if it's possible to create it without any interruptions, where both are easily clickable, and how I could do so.

Answer 1

A combination of position absolute and z-index will do the needy:
#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>

Answer 2

Use position relative and absolute on your video and pdf respectively and wrap them inside a container that uses position :relative aswell
This should do the trick :
.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>