“变形3d”不工作的位置：固定的孩子

Question

“变形3d”不工作的位置：固定的孩子

我遇到的情况是，在正常的CSS环境中，一个固定的div将准确地定位在指定的位置(top:0px, left:0px).

如果我有一个具有translate3d转换的父母，这似乎不被尊重。我没看到什么吗？我尝试过其他Webkit-转换风格和转换的原始选项，但没有运气。

我附上了一个JSFiddle在这个例子中，我希望黄色框位于页面的顶部，而不是容器元素的内部。

你可以在下面找到小提琴的简化版本：

#outer {

    position:relative; 

    -webkit-transform:translate3d(0px, 20px , 0px); 

    height: 300px; 

    border: 1px solid #5511FF; 

    padding: 10px;

    background: rgba(100,180,250, .8); 

    width: 80%;

}

#middle{

    position:relative; 

    border: 1px dotted #445511; 

    height: 300px; 

    padding: 5px;

    background: rgba(250,10,255, .6);

}

#inner {

    position: fixed; 

    top: 0px;

    box-shadow: 3px 3px 3px #333; 

    height: 20px; 

    left: 0px;

    background: rgba(200,180,80, .8); 

    margin: 5px; 

    padding: 5px;

}

<div id="container">

    Blue: Outer, <br>

    Purple: Middle<br>

    Yellow: Inner<br>

    <div id="outer"> 

        <div id="middle">

            <div id="inner">

                Inner block

            </div>

        </div>

    </div>

</div>

如何使翻译3d工作与固定位置的儿童？

Answer 1

这是因为transform创建一个新的本地坐标系，如W3C规范:在HTML命名空间中，除none对于转换，结果是创建一个堆叠上下文和一个包含块。该对象充当固定定位后代的包含块。这意味着固定定位将固定到转换后的元素，而不是视口。据我所知，目前还没有解决办法。埃里克·迈耶的文章也记载了这一点：用css变换不固定元素.

Answer 2

当页面中的项目正在使用Transform时，固定顶部导航上有一个闪烁，以下应用于我的顶部导航解决了跳转/闪烁问题：#fixedTopNav&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;fixed; &nbsp;&nbsp;&nbsp;&nbsp;top:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;transform:&nbsp;translateZ(0); &nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform:&nbsp;translateZ(0);}多亏了这个答案

Answer 3

就像Bradoergo建议的，把窗户打开scrollTop并将其添加到绝对位置顶部如下：function&nbsp;fix_scroll()&nbsp;{ &nbsp;&nbsp;var&nbsp;s&nbsp;=&nbsp;$(window).scrollTop(); &nbsp;&nbsp;var&nbsp;fixedTitle&nbsp;=&nbsp;$('#fixedContainer'); &nbsp;&nbsp;fixedTitle.css('position','absolute'); &nbsp;&nbsp;fixedTitle.css('top',s&nbsp;+&nbsp;'px');}fix_scroll();$(window).on('scroll',fix_scroll);反正这对我有用。