Fixed div stuck into parent - CSS

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...