CSS filter property disabling fixed position on navigation bar [duplicate] - html

Question

This question already has an answer here:
Why does clip-path (and other properties) affect the stacking order (z-index) of elements later in DOM?
(1 answer)
Closed 2 years ago.
I made my navigation bar and positioned it (fixed), and it works fine. I was able to scroll down and all. As soon has I added filter (brightness) to it the image on my page, the navigation bar disappeared. I have tried using pseudo-elements and setting the position (absolute/relative), I set the filter property to the container of the child element of the image, it still didn't work. Can someone help me on how to have my navigation bar display on fixed position and still have the image filtered. Thanks in Advance.
nav {
position: fixed;
background-color: #fff;
}
nav ul {
margin: 0;
padding: 0;
}
.navbar-brand {
padding-right: 20px;
}
nav li {
display: inline-block;
padding: 10px;
}
nav a {
color: #000;
text-decoration: none;
}
nav a:hover {
color: #ff6600;
text-decoration: none;
}
.title-image img {
width: 100%;
height: 300px;
filter: brightness(60%);
}
<nav>
<ul>
<li>
<a class="navbar-brand" href="#">Navbar Brand</a>
</li>
<li>
Home
</li>
<li>
About
</li>
<li>
services
</li>
</ul>
</nav>
<div class="title-image">
<img src="https://images.unsplash.com/photo-1599546824091-f49550ce8cbc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
</div>
JSfiddle Demo

Answer 1

Just add z-index to your nav element as follow
nav{
position: fixed;
background-color: #fff;
z-index:999;
}
nav ul{
margin: 0;
padding: 0;
}
.navbar-brand{
padding-right: 20px;
}
nav li{
display: inline-block;
padding: 10px;
}
nav a{
color: #000;
text-decoration: none;
}
nav a:hover{
color: #ff6600;
text-decoration: none;
}
.title-image img{
width: 100%;
height: 300px;
filter: brightness(60%);
}
<nav>
<ul>
<li>
<a class="navbar-brand" href="#">Navbar Brand</a>
</li>
<li>
Home
</li>
<li>
About
</li>
<li>
services
</li>
</ul>
</nav>
<div class="title-image">
<img src="https://images.unsplash.com/photo-1599546824091-f49550ce8cbc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
</div>

Answer 2

The navbar didn't disappear, it is just beneath the image. To have it in front, you should use z-index: 10; (or any value greater than 0).
See more at : https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
In addition, keep in mind that your image - or any element after your navbar - will be positioned on top of your page. May be you'll want to let the equivalent of the navbar height as space before any content.