Input box is always in foreground

[mdosch]

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.

[Paulie_D]

Has to be a z-index issue.

[Paulie_D]

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 */
}

[mdosch]

It works!

Thank you both for the fast help!
And now I have to read what this line means I just added. :D

[mdosch]

Ehm, thank you for your help. Somehow I thought the answers came from two different persons, sorry.

[Author]

Posts