I am currently working on a project that requires an image to be displayed prominently on the website along with some links positioned behind it. However, I'm facing an issue where I can't click on the links after implementing z-indexes to layer them correctly. I have attempted adjusting the index values of the links to be higher than those of the image, but unfortunately, I still can't interact with the links...
Here is the HTML code:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<meta name="Author" content="" />
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container">
<div class="milhoes">
<div class="milhoes_img_cont">
<img class="milhoes_img" src="milhoes.png" alt="">
</div>
<div class="left-menu">
<div class="menu-item" id="menu-primeiro">
<a href="">CARTAZ</a>
</div>
<div class="menu-item" id="menu-segundo">
<a href="">INFO</a>
</div>
<div class="menu-item" id="menu-terceiro">
<a href="">CONTACTOS</a>
</div>
</div>
<div class="right-menu">
<div class="menu-item" id="menu-primeiro-r">
<a href="">BILHETES</a>
</div>
<div class="menu-item" id="menu-segundo-r">
<a href="">LOJA</a>
</div>
<div class="menu-item" id="menu-terceiro-r">
<a href="">FESTIVAL</a>
</div>
</div>
</div>
</div>
</body>
</html>
CSS styling applied to the elements:
@media screen and (max-width: 1028px) {
.container {
background-color: pink;
}
}
@media screen and (max-width: 1024px) {
.container {
background-color: blue;
}
}
@media screen and (max-width: 800px) {
.container {
background-color: red;
}
}
@media screen and (max-width: 640px) {
.container {
background-color: green;
}
}
@media screen and (max-width: 320px) {
.container {
background-color: yellow;
}
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 100%;
background-color: black;
background-image: url(palco.jpg);
background-size: cover;
position: absolute;
top: 0;
left: 0;
z-index: -5;
}
.milhoes {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.menu-item {
height: 45px;
margin-bottom: 100px;
z-index: 100;
}
.milhoes_img {
height: 100%;
}
.milhoes_img_cont {
width: 100%;
height: 90%;
position: fixed;
z-index: 1;
margin-top: 2%;
}
.milhoes_img_cont img {
margin-left: auto;
margin-right: auto;
display: block;
}
.left-menu {
top: 10%;
left: 20%;
position: fixed;
z-index: 0;
}
#menu-primeiro {
-ms-transform: rotate(7deg);
-moz-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
transform: rotate(7deg);
-webkit-backface-visibility: hidden;
background-color: #e41e25;
width: 300px;
margin-top: 50px;
}
#menu-segundo {
-ms-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
-webkit-backface-visibility: hidden;
margin-left: 20px;
background-color: #e41e25;
width: 400px;
margin-top: 150px;
}
#menu-terceiro {
-ms-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
-webkit-backface-visibility: hidden;
margin-left: 40px;
background-color: #5bc7d2;
width: 350px;
margin-top: 150px;
}
.right-menu {
top: 10%;
right: 10%;
position: fixed;
width: auto;
text-align: right;
z-index: 0;
}
#menu-primeiro-r {
-ms-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-webkit-transform: rotate(-12deg);
transform: rotate(-12deg);
-webkit-backface-visibility: hidden;
background-color: #5bc7d2;
width: 350px;
margin-top: 50px;
margin-left: 100px;
}
#menu-segundo-r {
-ms-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-webkit-transform: rotate(2deg);
transform: rotate(2deg);
-webkit-backface-visibility: hidden;
background-color: #e41e25;
width: 400px;
margin-top: 150px;
margin-left: 60px;
}
#menu-terceiro-r {
-ms-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
-webkit-backface-visibility: hidden;
background-color: #5bc7d2;
width: 350px;
margin-top: 120px;
margin-right: 160px;
}
.right-menu a{
z-index: 120;
}
.menu-item a{
color: white;
line-height: 40px;
text-decoration: none;
font-size: 1.5em;
padding: 0 15px 0 15px;
font-family: Roboto, Arial, sans-serif;
}
For further reference, you can view this Pen