Fixed div stuck into parent - CSS - html

Question

As you can see from this fiddle:
http://jsfiddle.net/t1h3aauh/2/
I'm through a problem that I've never been before. I'm working with Drupal CMS and it generates a lot of the markup you need to style.
Given the use case, I have a MODAL box that are wrapped into a lot of divs and, like all MODALS, it need to be FIXED positioned. But, when I do this, the behavior is very much like absolute positioning. It get stuck in place and inherit all the .wrap div dimensions.
Thanks for the help.
Edit
The code:
HTML
<header class="sticky">log and menu</header>
<main>
<section class="test">
<div class="wrap">
<div class="myEl">
<!--HERE BE SOME SCROLLABLE ELEMENTS-->
<div.class="iWannaBeScrollable">i'm scrollable</div>
<!--HERE BE THE FIXED ONE-->
<div class="modal">as you can see, this should be FIXED, but appears to be stuck into the parent.</div>
</div>
</div>
</section>
</main>
CSS
body{
margin: 0;
padding: 0;
}
.sticky{
float: left;
position: fixed;
height: 40px;
width: 100%;
background-color: green;
left: 0;
top: 0;
z-index: 10;
}
.wrap {
background-color: #333;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
width: 100%;
height: auto;
max-width: 1200px;
float: left;
position: relative;
left: 50%;
}
main {
height: 1535px;
width: 100%;
float: left;
position: relative;
.test {
width: 100%;
height: auto;
padding: 72px 0;
float: left;
position: relative;
&::before{
content: "";
width: 100%;
height: 82%;
top: 21%;
background-color: #fafafa;
position: absolute;
}
.myEl{
float: left;
position: relative;
height: 300px;
width: 100%;
.modal {
position: fixed;
height: 100%;
width: 100%;
background-color: rgba(255,0,255,.5);
left: 0;
top: 0;
z-index: 100;
}
}
}
}

Answer 1

Why is there
transform: translateX(-50%);
on the .wrap element?
I think thats causing your problem...

Answer 2

IIRC: In my Drupal days, anytime you needed to fix an element, you wanted to call the top most parent.
So in this case, you would want to apply postioned:fixed it to .wrap.
.wrap{
position:fixed;
}
Here's why:
You are styling Modal with the fixed, so it is staying fixed within it's parent. You're parent/grandparent is styled as position:relative. Which makes .wrap and .myEl scrollable, while the modal is fixed within the scrollable div.
This makes it appear as if it is position:absolute;