htmlcsshyperlinkmenuz-index

CSS z-index conflicts with links

I am making a website in which I need to have an image on the front and some links behind it, but when I do so, using the z-indexes, I can no longer click the links, I have tried changing the link's index above the image ones and I still can't click…

html:

<!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:

@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;
}

Here is a Pen for it

Solution

  • Look into pointer-events: none; It will allow you to click through overlaid elements.