Question

我的情况是，在正常的CSS情况下，固定的div将准确定位到指定的位置（top:0px，left:0px）。

如果我有一个具有translate3d变换的父级，这似乎不受尊重。我没有看到什么？我尝试了其他webkit-transform，如样式和变换原点选项，但没有运气。

我附上了一个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>

如何让translate3d与固定位置的孩子一起工作？

Answer 1

这是因为transform根据W3C spec创建了一个新的本地坐标系：

在HTML命名空间中，转换的none以外的任何值都会导致堆叠上下文和包含块的创建。该对象充当固定位置后代的包含块。

这意味着固定定位将固定到变换后的元素，而不是视口。

目前还没有我知道的解决办法。

Eric Meyer的文章Un-fixing Fixed Elements with CSS Transforms也记录了这一点。

Answer 2

当页面中的项目使用转换时，我的固定顶部导航系统出现了闪烁，以下应用于我的顶级导航系统解决了跳跃/闪烁问题：

#fixedTopNav {
    position: fixed;
    top: 0;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

Thanks to this answer on SO

Answer 3

正如Bradoergo建议的那样，只需获取窗口scrollTop并将其添加到绝对位置顶部，如：

function fix_scroll() {
  var s = $(window).scrollTop();
  var fixedTitle = $('#fixedContainer');
  fixedTitle.css('position','absolute');
  fixedTitle.css('top',s + 'px');
}fix_scroll();

$(window).on('scroll',fix_scroll);

无论如何，这对我有用。

Answer 4

在Firefox和Safari中，您可以使用position: sticky;代替position: fixed;，但在其他浏览器中无效。为此你需要javascript。

Answer 5

在我看来，解决这个问题的最佳方法是应用相同的翻译，但要打破需要修复其父（翻译）元素的子项;然后将translate应用于null包装器中的div。

结果看起来像这样（在你的情况下）：

position: fixed

JSFiddle：https://jsfiddle.net/hju4nws1/

虽然这可能不适合某些用例，但通常如果你正在修复一个div，你可能不太关心它的父元素是什么元素/它在DOM中的继承树中的位置，并且似乎解决了大多数问题。头痛 - 虽然仍允许<div style='position:relative; border: 1px solid #5511FF; -webkit-transform:translate3d(0px, 20px , 0px); height: 100px; width: 200px;'> </div> <div style='position: fixed; top: 0px; box-shadow: 3px 3px 3px #333; height: 20px; left: 0px;'> <div style='-webkit-transform:translate3d(0px, 20px, 0px);'> Inner block </div> </div>和translate生活在（相对）和谐中。

Answer 6

我遇到了同样的问题。唯一的区别是我的'position：fixed'元素有JS设置的'top'和'left'样式属性。所以我能够应用修复：

var oRect = oElement.getBoundingClientRect();

oRect对象将包含 real （相对于视口）顶部和左侧坐标。因此，您可以调整实际的oElement.style.top和oElement.style.left属性。

Answer 7

我有一个使用-webkit-transform：translate3d的画布边栏。这阻止我在页面上放置固定的页脚。我通过在html页面上定位一个类来解决这个问题，该类在边栏初始化时添加到标记然后编写一个css：not qualifier to state＆＃34; -webkit-transform：none;＆＃34;当html标记上没有该类时，html标记。希望这可以帮助那些有同样问题的人！

Answer 8

尝试将相反的变换应用于子元素：

<div style='position:relative; border: 1px solid #5511FF; 
            -webkit-transform:translate3d(0px, 20px , 0px); 
            height: 100px; width: 200px;'> 
    <div style='position: fixed; top: 0px; 
                -webkit-transform:translate3d(-100%, 0px , 0px); 
                box-shadow: 3px 3px 3px #333; 
                height: 20px; left: 0px;'>
        Inner block
    </div>
</div>

Answer 9

在元素变形时添加动态类。$('#elementId').addClass('transformed')。然后继续在CSS中进行声明，

.translat3d(@x, @y, @z) { 
     -webkit-transform: translate3d(@X, @y, @z); 
             transform: translate3d(@x, @y, @z);
      //All other subsidaries as -moz-transform, -o-transform and -ms-transform 
}

然后

#elementId { 
      -webkit-transform: none; 
              transform: none;
}

然后

.transformed {
    #elementId { 
        .translate3d(0px, 20px, 0px);
    }
}

现在，在子元素上提供position: fixed和top属性值的z-index可以很好地工作并保持固定，直到父元素变形为止。恢复转换后，子元素将再次按固定方式弹出。如果您实际上使用的导航侧栏可以在单击时切换打开和关闭，并且您具有一个选项卡集，在向下滚动页面时该选项卡集应该保持粘性，这应该可以缓解这种情况。

Answer 10

解决这个问题的一种方法是将相同的变换应用于固定元素：

<br>
<div style='position:relative; border: 1px solid #5511FF; 
            -webkit-transform:translate3d(0px, 20px , 0px); 
            height: 100px; width: 200px;'> 
    <div style='position: fixed; top: 0px; 
                -webkit-transform:translate3d(0px, 20px , 0px); 
                box-shadow: 3px 3px 3px #333; 
                height: 20px; left: 0px;'>
        Inner block
    </div>
</div>

'transform3d'不适用于职位：固定子女

10 个答案: