html - 修复了 div 卡在父级中的问题 - CSS

Question

从这个 fiddle 可以看出: http://jsfiddle.net/t1h3aauh/2/

我遇到了以前从未遇到过的问题。我正在使用 Drupal CMS，它会生成大量您需要设置样式的标记。

鉴于用例，我有一个包裹在很多 div 中的模态框，并且像所有模态一样，它需要固定定位。但是，当我这样做时，行为非常类似于绝对 定位。它卡在原地并继承所有 .wrap div 尺寸。

感谢您的帮助。

编辑

代码:

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

为什么会有 转换:translateX(-50%)；在 .wrap 元素上？ 我认为这导致了你的问题......