Z-index not working for ribbon, background and input

Question

I ran into a problem yesterday in my React app, but it is really just HTML:

I'm making an app with a background, and input and a ribbon. Here is the code for my ribbon:

const MyRibbon = styled.div`
    background: ${blueLight};
    color: white;
    display: inline-block;
    font-family: Roboto, sans-serif;
    font-weight: bold;
    font-size: 13px;
    padding: 8px 16px;
    position: relative;
    margin: 0;
    text-align: center;
    z-index: 1;

  &:before, &:after {
        content: "";
        width: 50px;
        bottom: -5px;
        position: absolute;
        display: block;
        border: 14px solid ${blueDark};
        z-index: -1;  
    }

    &:before {
        left: -40px;
        border-right-width: 12px;
        border-left-color:transparent;
    }

    &:after {
        right: -40px;
        border-left-width: 12px;
        border-right-color:transparent;
    }
`;

and this is the code for my background:

const Div = styled.div`
    background-color: rgb(242,242,242);
    font-family: Roboto, sans-serif;
    height: 100%;
    position: relative;
    text-align: center;
    z-index: -1000;
`;

I am expecting this to create a ribbon with the :before and :after els behind the ribbon. However, they come up above it. Somehow, I managed to fix this yesterday eve, which I cannot recreate now. Nevertheless, once I added an input field, it wouldn't be clickable, even when I fiddled with the form's and its position: relative and z-index.

Can somebody pleease help me?

score 0 · Answer 1 · answered Aug 07 '17 at 11:06

Ok, I finally got it to work per this answer. Instead of setting a position and z-index on the background div, I wrapped only the ribbon (in a div with position: relative and z-index: 5). Then I have .ribbon {position: relative;} and .ribbon:before, .ribbon:after {position: absolute; z-index: -2}. This is a clever way thanks to which the input still works!

Hope that helps somebody.

Z-index not working for ribbon, background and input

1 Answers1