- This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
Viewing 5 posts - 1 through 5 (of 5 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
I have set up a header bar that’s fixed to the top and when you scroll you will see the text scrolling behind the header bar as it has opacity 0.8. But if there is a input field of my commenting system (Isso) it is always in the foreground (so in front of the header bar) which looks weird.
I searched the internet for all possible combinations of css, input, foreground, background and opacity, tried a lot and looked at it with Firefox development tools but I don’t get what’s going wrong there.
If you want to see an example, there you go: https://blog.mdosch.de/2018/05/04/seite-fuer-xmpp-einsteiger-sucht-unterstuetzer/
I’d very much appreciate any suggestion what could cause this.
Has to be a z-index
issue.
Yep.
#header {
font-size: 14px;
position: fixed;
width: 100%;
border-bottom: 0.2em solid #808080;
background: #c7c7c7;
opacity: 0.8;
z-index: 1; /* add this */
}
It works!
Thank you both for the fast help!
And now I have to read what this line means I just added. :D
Ehm, thank you for your help. Somehow I thought the answers came from two different persons, sorry.