Html '；transform3d&x27；不使用位置：固定的子对象

我遇到的情况是，在正常的CSS环境中，一个固定的div将精确地定位在指定的位置（

top:0px

，

left:0px

）

如果我有一个具有translate3d转换的父级，则这似乎不受尊重。我没看见什么吗？我尝试过其他webkit变换，如样式和变换原点选项，但没有成功

我附上了一个示例，我希望黄色框位于页面的上角，而不是容器元素的内部

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

#外部{
位置：相对位置；
-webkit转换：translate3d（0px，20px，0px）；
高度：300px；
边框：1px实心#5511FF；
填充：10px；
背景：rgba（100180250，.8）；
宽度：80%；
}
#中间的{
位置：相对位置；
边框：1个点#445511；
高度：300px；
填充物：5px；
背景：rgba（250,10255,6）；
}
#内在的{
位置：固定；
顶部：0px；
盒影：3px 3px 3px#333；
高度：20px；
左：0px；
背景：rgba（200180,80,8）；
保证金：5px；
填充物：5px；
}

蓝色：外部，

紫色：中间

黄色：内部

内块

这是因为

变换创建了一个新的局部坐标系，如下所示：

在HTML名称空间中，除了变换的
none
之外的任何值都会创建堆叠上下文和包含块。对象充当固定定位子体的包含块

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

目前我还不知道有什么解决办法

Eric Meyer的文章中也记录了这一点：。
我遇到了同样的问题。唯一的区别是，带有“position:fixed”的元素的“top”和“left”样式属性是从JS设置的。因此，我能够应用修复：

var oRect = oElement.getBoundingClientRect();

oRect对象将包含真实的（相对于视口）顶部和左侧坐标。因此，您可以调整实际的oElement.style.top和oElement.style.left属性。
正如Bradoergo所建议的那样，只需获取窗口
滚动条
并将其添加到绝对位置top，如：

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

无论如何，这对我来说是有效的。
当页面中的项目使用transform时，我的固定顶部导航出现闪烁，以下应用于我的顶部导航解决了跳跃/闪烁问题：

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

处理此问题的一种方法是对固定元素应用相同的变换：

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

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



内块
在Firefox和Safari中，您可以使用
位置：sticky代替
位置：固定但它在其他浏览器中不起作用。为此，您需要javascript。
我有一个非画布侧栏，它使用-webkit transform:translate3d。这使我无法在页面上放置固定页脚。我解决了这个问题，方法是在侧边栏初始化时将html页面上添加到标记中的类作为目标，然后在html标记上不存在该类时，将css:not限定符写入html标记中的state“-webkit transform:none；”。希望这能帮助其他人解决同样的问题
 尝试对子元素应用反向变换：

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

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


内块
在我看来，处理这一问题的最佳方法是应用相同的翻译，但将需要固定的子元素从父元素（翻译）中分离出来；然后将translate应用于
位置：fixed
包装中的div

结果如下所示（在您的案例中）：


内块

JSFiddle：

虽然这对于某些用例来说可能并不理想，但通常，如果您正在修复一个div，您可能不太关心它的父元素是什么/它在DOM的继承树中位于何处，并且似乎解决了大多数头痛问题-同时仍然允许
translate
和
position:fixed
在其中生存（相对）和谐。
在元素转换时添加动态类。
$（“#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 
}

然后

然后

现在
position:fixed
当在子元素上提供
top
和
z-index
属性值时，该属性值可以正常工作并保持固定，直到父元素转换。当转换被还原时，子元素再次作为固定元素弹出。如果您实际使用的是一个导航侧边栏，可以在单击时切换打开和关闭，并且您有一个选项卡集，当您向下滚动页面时，该选项卡集应保持粘性，那么这种情况应该会有所缓解。
谢谢，我没有注意到实际的规范中有此信息。。。。。我想我得到了与数学答案相当的答案：“根据定义”：@INT，我不认为会有解决办法。不允许采取变通办法有一个主要的使用案例：用户提供的输入可能会覆盖其指定区域之外的控件（想想恶意电子邮件会在gmail工具栏上添加选项）。最好的解决方法是，如果要从内部使用fixed，暂时避免转换。将CSS top属性设置为任何window.scrollHeight都有效吗？你可能也必须确定它的位置，但是像这样的事情应该是可行的，不是吗？（现在懒得去真正测试了）@bradorego你说得对，我刚刚添加了我使用的代码。据我所知，这在规范中仍在不断变化。请参阅。这适用于IE和Chrome，但不适用于Android标准浏览器。左边是一个数字，但它总是画在它工作的位置0上！但我没有绑定到“窗口”，而是绑定到正在滚动的div。
.transformed {
    #elementId { 
        .translate3d(0px, 20px, 0px);
    }
}