Any elements with z-index is relative to sibling element of the same level, and child elements of that element are only relative to child sibling elements of that level within that parent. A higher child z-index won't place it at a higher level than any parent sibling elements z-indexes, only the parent can do that.
So a parent container is always the uppermost level to whatever its child element level is, this continues on with children elements of the child elements which is there parent and so on.
NOTE: However early versions of Firefox, and maybe present version does not follow this rule completely, but you should follow this rule set up above.
You have your modal position fixed using z-index: 999 within a parent element using z-index: 2; your navbar parent is using z-index: 3; like already mentioned the parent of z-index: 999, will be the highest above any children set levels, so navbar parent z-index: 3; is higher than modal parent z-index:2, so it will overlap the modal.