My fixed modal has a z-index set to 100, but it seems to be positioned below an element with a z-index of 2 and a position set to relative. I'm not sure why this is happening. You can view the code in this fiddle. Any insights or assistance would be greatly appreciated. Thank you!
It is necessary to remove the modal-wrapper div from the paper-header div. Below is the complete code snippet.
.paper-header {
align-items: flex-start;
display: flex;
justify-content: space-between;
position: relative;
z-index: 2;
background: #ffffff;
min-height: 8rem;
}
.paper-body {
position:relative;
z-index: 1;
}
.modal-wrapper {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
z-index: 100;
overflow-x: hidden;
overflow-y: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.modal {
width: 32.5rem;
background-color: #FFFFFF;
border-radius: 4px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
position: relative;
z-index: 101;
padding: 1.25rem;
}
.modal-overlay {
position: absolute;
z-index: 100;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 1.25rem;
background-color: rgba(34, 34, 34, 0.5)
}<div class="wrapper">
<div class="paper-header">
<h1>
Segment 1
</h1>
</div>
<div class="modal-wrapper">
<div class="modal">
modal content
</div>
<div class="modal-overlay"></div>
</div>
<div class="paper-body">
Segment body
</div>
<div class="paper-header">
<h2>
Segment 2
</h2>
</div>
</div>When the z-index of the parent element is lower, the children elements will have a higher z-index than their parent.
For example, setting the z-index of 'modal-wrapper' to 100 won't work because its parent element, 'paper-header', has a z-index of 2.
Therefore, the children's z-index will be 2.
The solution is simple:
Just make the sibling element of paper-header and it will work fine.
.paper-header {
align-items: flex-start;
display: flex;
justify-content: space-between;
position: relative;
z-index: 2;
background: #ffffff;
min-height: 8rem;
}
.paper-body {
position:relative;
z-index: 1;
}
.modal-wrapper {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
z-index: 100;
overflow-x: hidden;
overflow-y: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.modal {
width: 32.5rem;
background-color: #FFFFFF;
border-radius: 4px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
position: relative;
z-index: 101;
padding: 1.25rem;
}
.modal-overlay {
position: absolute;
z-index: 100;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 1.25rem;
background-color: rgba(34, 34, 34, 0.5)
}<div class="wrapper">
<div class="paper-header">
<h1>
Segment 1
</h1>
</div>
<div class="modal-wrapper">
<div class="modal">
modal content
</div>
<div class="modal-overlay"></div>
</div>
<div class="paper-body">
Segment body
</div>
<div class="paper-header">
<h2>
Segment 2
</h2>
</div>
</div>---- thank you ----
I've been struggling to set a maximum height on the slider I'm currently using. No matter what height value I input, it doesn't seem to take effect. Additionally, I attempted setting the width for the echo img row in the PHP section but enco ...
My grid created using bootstrap 3 divs consists of a button, followed by a radio button, and then another button. I want to highlight these elements with a consistent background color that stretches across like a single row. Check out my attempt on this f ...
I have been working on creating a ReactJS component that displays an array of chips with unique styling for each one. To achieve this, I created individual makeStyles classes for the chips. However, I encountered difficulties in dynamically changing the cl ...
On my website, I want to display a logo in the header only when the site has been scrolled. I attempted to accomplish this with JavaScript: if(document.getElementById("div").scrollTop != 0){ document.write("<img src='logo.jpg'>"); } How ...
What is the method for attaching CSS to sp-copyright? <div class="container"> <div class="row"> <div id="sp-footer1" class="col-sm-12 col-md-12"> <div class="sp-column "> <span class="sp-copyright"> ...
I am struggling to add a video to my page. The default method of creating a path for it isn't working for me. I believe I need to place the path somewhere else, but I'm not sure where. I have attempted to include the video in the same folder as ...
I'm having trouble aligning labels and inputs in my contact form. They need to be aligned to the right due to the Hebrew language. Here is a link to the fiddle of my code which is not working, you can see that the input boxes are not aligned. I need t ...
<table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <table width="100%" height="131" border="0" cellspacing="0" cellpadding="0"> <tr> <td wid ...
I'm struggling to implement a smooth scroll effect on the header of my website. My approach involves using transform:translate3d for animation, with the goal of keeping the header fixed at the top and moving it out of view as the user scrolls down. I ...
I'm struggling with jQuery Slide Toggle. $(document).ready(function() { $("a").click(function() { $(this).parent().parent().children("p").Toggle(400); return false; }); }); I have multiple posts displayed on the page fetched from ...
I am incorporating a modal that corresponds each element of the object newCompanies to a specific row: {newCompanies.map((company, index) => { return ( <div> <div className="side- ...
I'm looking to target a specific child element within a div using CSS. Here's the HTML code I have: <div class='body'> <text>This is a text element</text> </div> Instead of adding a class or an ID, I want to ...
Currently, I am utilizing jquery, jquery mobile, js, html, and css within Phonegap to develop my android/ios application. However, my understanding of js & jquery is somewhat limited. In my index.html file, I use .load to load other html files into s ...
I'm a newcomer to materialUI and I have a question regarding customizing an outlined input field with an icon. Due to my dark background, I need the icon, border, and text color to be lighter, such as grey. Can someone please advise on the materialUI ...
I stumbled upon something similar in the documentation for bootstrap-vue: A card with tabs: https://i.sstatic.net/HoVEC.png Now, how can I style the tabs to look like this: https://i.sstatic.net/dbsRj.png This is my current code: <b-card no-body ...
Traditional fonts typically require a separate file for each weight variant, such as 300, 400, and 500. However, with variable fonts, all weight combinations can be accessed through a single compact font file. This is extremely advantageous for web design. ...
Is it possible to create a hover effect using purely CSS when hovering over an image, like in this example: https://i.sstatic.net/jjAWm.jpg I've come across several similar examples online, but they all seem to rely on jquery or javascript. I'm ...
I'm struggling to find the right approach to make this animation work effectively. Currently, I have two elements centered vertically within a flexbox layout. My goal is to animate these elements into their final positions by sliding in from off-scre ...
Forgive me for asking such a basic question, but I struggle with aligning and positioning elements. Here is my issue: https://i.sstatic.net/Uy6XB.jpg https://i.sstatic.net/TTs6V.jpg All I want is for the glyphicon to be displayed next to the textfield, ...
Currently, I am facing a challenge in implementing a scroll down arrow. While this is typically a simple task, it has proven to be a bit more complex this time around. The complexity arises from the fact that my customer desires a homepage with an image of ...