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.

Sharivari
  • 103
  • 9
  • 1
    Difficult to diagnose without a working snippet or a link to the page. Can you provide 1? – gael May 17 '19 at 13:05
  • http://styledesign.de/example/ Modal opens with click on the footer links. – Sharivari May 17 '19 at 13:09
  • Careful differentiating between modal and modal wrapper. The animation certainly works on the wrapper but the modal ( which covers the entire screen) may not. – Will May 17 '19 at 13:12
  • possible duplicate https://stackoverflow.com/questions/2837057/what-has-bigger-priority-opacity-or-z-index-in-browsers - it's all to do with the stacking context - changing the opacity below 1 will change the stacking context and bring z-indexes into play so it is to do with the z-index too – Pete May 17 '19 at 13:58

1 Answers1

0

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.

gael
  • 1,314
  • 2
  • 12
  • 20
  • As I said it's not because of the z-index. The modal overlaps everything when the opacity finally reaches 1. I however tried your approach with positon: fixed and now it's not overlapping anymore, even when the opacity of 1 has been reached. – Sharivari May 17 '19 at 13:26