Skip to main content

Forums

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #270906
    mdosch
    Participant

    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.

    #270907
    Paulie_D
    Moderator

    Has to be a z-index issue.

    #270908
    Paulie_D
    Moderator

    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 */
    }
    
    #270909
    mdosch
    Participant

    It works!

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

    #270910
    mdosch
    Participant

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.
icon-link icon-logo-star icon-search icon-star