Dropdown navbar unclickable when over video element in chrome for android

Question

I have a dropdown navbar with position: sticky and i have a video element . When scrolling down in landscape mode the navbar should overlay the video, and it does, but the default play button is still displayed over the navbar, and regardless of that, the navbar links are not clickable when they appear over the video element. It works fine on other browsers.

I found some suggestions that using z-index might help but the issue stayed

Heres's some example:

 nav ul { list-style-type: none; margin: 0; background-color: #480607; overflow: hidden; width: 100%; } nav ul li { float: left; } nav ul li a { color: white; padding: 20px 40px; text-decoration: none; display: block; } nav ul li a.active { background-color: #160000; } nav ul li a:hover:not(.active) { background-color: #4f4f4f; } h1 { margin: 2px; } header { text-align: center; background-color: #160000; margin: -2px; align-self: start; color: white; } #sticky{ position: sticky; top: 0; z-index: 1; } nav { align-self: start; } nav img { display: none; } video{ z-index: 0; } /*smartphone*/ @media screen and (max-width: 600px) and (orientation: portrait) { ul { display: none; } nav img { display: block; width: 30px; position: fixed; top: 0; } nav:hover ul { display: block; } main { grid-template-columns: 1fr; grid-template-areas: 'greeting' 'text' 'media'; } iframe, video { width: 70vw; height: 39.354vw; } }

 <div id="sticky"> <header> <h1>some header</h1> </header> <nav> <img id="menu_icon" src="media/menu.png" alt="menu icon" /> <ul> <li><a class="active" href="index.html">first</a></li> <li><a href="tortenet.html">second</a></li> <li><a href="targyak.html">third</a></li> <li><a href="elovilag.html">fourth</a></li> </ul> </nav> </div> <main> <section id="media"> <figure> <video width="560" controls="controls"> <source src="media/short_gameplay.mp4" type="video/mp4" /> Nem működik a lejátszó? <a href="media/short_gameplay.mp4">töltsd le a videót</a> </video> <figcaption>Az első lépések</figcaption> </figure> </section> </main>

Thank you for reading trough all this!

Answer 1

After all z-index was the solution, but as @CBroe stated it only works with position: relative . So the correct css would be like this

video{
    position: relative;
    z-index: 0;
}
#sticky{
    position: sticky;
    top: 0;
    z-index: 1;
}