Search code examples
cssopacityfixed

CSS Opacity only works with 0 or 1

I have a strange behaviour when transitioning the opacity of a modal background. Transition starts from 0 and ends with 1. I see that the transition is working in the area where no other HTML element is. It fades perfectly from 0 to 1.

But I use a fixed header and footer. While transitioning from 0 to 0.9999.. the header / footer are always fully visible over the modal. When opacity reaches the value 1, it's finally overlapping the header and footer.

I thought of the z-index at first, but that doesn't make sense because when the opacity reaches 1 it's overlapping the header and footer.

#header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 80px;
    background-color: #002d42;
}

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 56px;
    background-color: red; /** #004666 **/
}

I expect that the modal background also fades over the fixed header and footer elemented and not only is overlapping when the opacity reached the value 1.

Solution

  • You need to give a fixed position to your modal container too 

    #modal {
    visibility: visible;
    opacity: 1;
    -webkit-transition: opacity 2s ease;
    position: fixed;
    z-index: 9999;
}

    If not, its position is static by default and doesn't care about z-indexes untill its child <div class="modal"> is fully loaded.

    Position relative or absolute would also work but not default static.