This question already has an answer here:
I have added lightning Modal (slds) component A in a another Lightning Component B. Lightning component B is used to create Lightning Tab.
Now when I show the modal, Position of Modal component A is restricted inside Parent component B. I would like to display modal above global Header (outside Component A) as in attached screenshot. CSS z-index is not much helpful, may be i am wrong. Please help to fix this position issue. Thanks for your time.`
Followed - Markup From SLDS Page (Summer ’17)
<div class="slds"> <section role="dialog" tabindex="-1" aria-hidden="true" aria-labelledby="modal-content-id-2" aria-describedby="modal-content-id-2" class="slds-modal slds-fade-in-open"> <div class="slds-modal__container"> <header class="slds-modal__header"></header> </div> <!-- Modal Content --> </section> <div class="slds-backdrop slds-backdrop_open"></div> </div>