I have a gallery implemented in HTML and CSS where the header menu is hiding behind the tiles. I’ve tried using the z-index property to adjust the stacking order, but it didn’t solve the issue. Additionally, the link attached to the "Categories" menu item does not seem to work, although the path is correct and has been verified.
Here’s the code:
document.addEventListener("DOMContentLoaded", function(event) {
const gallery = document.getElementById("gallery");
window.onmousemove = e => {
const mouseX = e.clientX,
mouseY = e.clientY;
const xDecimal = mouseX / window.innerWidth,
yDecimal = mouseY / window.innerHeight;
const maxX = gallery.offsetWidth - window.innerWidth,
maxY = gallery.offsetHeight - window.innerHeight;
const panX = maxX * xDecimal * -1,
panY = maxY * yDecimal * -1;
gallery.animate({
transform: `translate(${panX}px, ${panY}px)`
}, {
duration: 4000,
fill: "forwards",
easing: "ease"
})
}
});body {
background-color: rgb(10, 10, 10);
height: 100vh;
margin: 0px;
overflow: hidden;
}
#gallery {
height: 140vmax;
width: 140vmax;
position: absolute;
}
.tile {
border-radius: 1vmax;
position: absolute;
transition: transform 800ms ease;
pointer-events: none;
z-index: 1;
}
.tile:hover {
transform: scale(1.1);
pointer-events: auto;
}
.tile:hover>img {
opacity: 1;
transform: scale(1.01);
}
.tile>img {
height: 100%;
width: 100%;
object-fit: cover;
border-radius: inherit;
opacity: 0;
transition: opacity 800ms ease, transform 800ms ease;
}
.tile:nth-child(1) {
background-color: rgb(255, 238, 88);
height: 14%;
width: 20%;
left: 5%;
top: 5%;
}
.tile:nth-child(2) {
background-color: rgb(66, 165, 245);
height: 24%;
width: 14%;
left: 42%;
top: 12%;
}
.tile:nth-child(3) {
background-color: rgb(239, 83, 80);
height: 18%;
width: 16%;
left: 12%;
top: 34%;
}
.tile:nth-child(4) {
background-color: rgb(102, 187, 106);
height: 14%;
width: 12%;
left: 45%;
top: 48%;
}
.tile:nth-child(5) {
background-color: rgb(171, 71, 188);
height: 16%;
width: 32%;
left: 8%;
top: 70%;
}
.tile:nth-child(6) {
background-color: rgb(255, 167, 38);
height: 24%;
width: 24%;
left: 68%;
top: 8%;
}
.tile:nth-child(7) {
background-color: rgb(63, 81, 181);
height: 16%;
width: 20%;
left: 50%;
top: 74%;
}
.tile:nth-child(8) {
background-color: rgb(141, 110, 99);
height: 24%;
width: 18%;
left: 72%;
top: 42%;
}
.tile:nth-child(9) {
background-color: rgb(250, 250, 250);
height: 10%;
width: 8%;
left: 84%;
top: 84%;
}
a {
text-decoration: none;
color: white;
}
.menu-bar {
display: flex;
justify-content: flex-end;
left: 70%;
top: 5%;
text-decoration: none;
user-select: none;
z-index: 999;
}
.menu-bar>.menu-item {
font-size: medium;
font-family: megrim;
padding: 40px;
text-decoration: none;
}
.menu-bar>.menu-item:hover {
color: white;
font-size: medium;
font-family: megrim;
font-weight: bold;
padding: 40px;
opacity: 0.8;
transform: scale(1.2);
transition: all ease-in-out 300ms;
}
a {
text-decoration: none;
color: white;
}<header>
<div class="menu-bar">
<div class="menu-item"> <a href="#"> HOME </a></div>
<div class="menu-item"> <a href="C:\\Users\\engar\\Desktop\\Web Merge\\Category\\categories.html"> Categories </a></div>
<div class="menu-item"> <a href="###"> Contact </a></div>
</div>
</header>
<div id="gallery">
<a href="#" class="tile">
<img src="pictures/6.jpg" />
</a>
<a href="#" class="tile">
<img src="pictures/10.jpg" />
</a>
<a href="#" class="tile">
<img src="pictures/21.jpg" />
</a>
<a href="#" class="tile">
<img src="pictures/22.jpg" />
</a>
<a href="#" class="tile">
<img src="pictures/23.jpg" />
</a>
<a href="#" class="tile">
<img src="pictures/28.jpg" />
</a>
<a href="#" class="tile">
<img src="pictures/34.jpg" />
</a>
<a href="#" class="tile">
<img src="pictures/35.jpg" />
</a>
<a href="#" class="tile">
<img src="pictures/84.jpg" />
</a>
</div>I would appreciate any insights or suggestions on how to resolve these two issues:
- How can I ensure that the header menu appears on top of the gallery
tiles and is not hidden behind them? - Why is the link for the "Categories" menu item not working, even
though the file path is correct?
Thank you in advance for your help!
>Solution :
Have you tried z-index with positioning to move header before any other element on website? It worked for me when I added this with developer tools.
In order for z-index to have any effect at all, it needs to be applied to a positioned element, that means, an element with position relative , absolute , fixed , or sticky . If you don’t apply a z-index , the elements will be stacked in the order they are written in the HTML.
header {
position:relative;
z-index:1;
}