Skip to main content

Forums

This topic contains 4 replies, has 2 voices, and was last updated by  mdosch 1 year, 2 months ago.

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