“transform3d"不适用于位置:固定子项 [英] 'transform3d' not working with position: fixed children

问题描述

我有一种情况，在正常的 CSS 环境中，固定的 div 将准确定位在指定的位置(top:0px、left:0px).

如果我有一个具有 translate3d 转换的父级，这似乎不受尊重.我没有看到什么吗?我尝试过其他 webkit-transform，如 style 和 transform origin 选项，但没有运气.

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

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

#outer {位置:相对；-webkit-transform:translate3d(0px, 20px, 0px);高度:300px；边框:1px 实心 #5511FF；填充:10px；背景:RGBA(100,180,250, .8);宽度:80%；}#中间{位置:相对；边框:1px 虚线 #445511;高度:300px；填充:5px；背景:rgba(250,10,255, .6);}#内{位置:固定；顶部:0px；框阴影:3px 3px 3px #333;高度:20px；左:0px；背景:RGBA(200,180,80, .8);边距:5px；填充:5px；}

蓝色:外，<br>紫色:中<br>黄色:内部<br><div id="外层"><div id="中间"><div id="内部">内块

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

解决方案

这是因为 transform 根据 W3C 规范:

<块引用>

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

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

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

它也记录在 Eric Meyer 的文章中:使用 CSS 转换取消修复固定元素.

I have a situation where, in normal CSS circumstances, a fixed div would be positioned exactly where it is specified (top:0px, left:0px).

This does not seem to be respected if I have a parent that has a translate3d transform. Am I not seeing something? I have tried other webkit-transform like style and transform origin options but had no luck.

I have attached a JSFiddle with an example where I would have expected the yellow box be at the top corner of the page rather than inside of the container element.

You can find below a simplified version of the fiddle:

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

How can I make translate3d work with fixed-positioned children?

解决方案

This is because the transform creates a new local coordinate system, as per W3C spec:

In the HTML namespace, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.

This means that fixed positioning becomes fixed to the transformed element, rather than the viewport.

There's not currently a work-around that I'm aware of.

It is also documented on Eric Meyer's article: Un-fixing Fixed Elements with CSS Transforms.

这篇关于“transform3d"不适用于位置:固定子项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！