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

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;
}

任何使translate3d与固定位置的孩子一起工作的指针将不胜感激.

Answer 1

这是因为transform根据W3C规范创建了一个新的局部坐标系:

在HTML命名空间中,除了none转换之外的任何值都会导致创建堆栈上下文和包含块.该对象充当固定定位后代的包含块.

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

目前还没有我知道的解决方法.

Eric Meyer的文章也记录了这一点:用CSS变换解锁固定元素.

Answer 2

当页面中的项目使用变换时,我的固定顶部导航栏上出现了闪烁,以下应用于我的顶级导航解决了跳跃/闪烁问题:

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

感谢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。