Incorporating a basic Vue.js app and aiming to introduce a component functioning as a popup. My usual method that has consistently produced results involves adding a div with the following CSS code:
.popupBg {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 5;
width: 100%;
height: 100%;
}
The purpose of this div is to serve as a semi-transparent overlay background with another nested div acting as the actual container for the popup form.
After setting up a new Vue.js project recently and attempting to incorporate a similar popup setup with an overlay, I encountered an issue where the fixed div remains confined within one of its parent divs instead of stretching across the entire HTML page.
App:
HTML structure:
The overlay resides within a div featuring the class traitGenerator container medium, while the overlay itself is located in the div labeled traitSelector popupBg
I have followed the same process numerous times in past projects, making this particular situation perplexing. Shouldn't the key feature of position: fixed be to disregard other elements in the DOM? Where could my mistake lie?