'transform3d'不能使用position：fixed children [英] 'transform3d' not working with position: fixed children

问题描述

我有一种情况，在正常的CSS环境中，一个固定的div将被精确定位到指定的位置（ top：0px ， left ：0px ）。

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

如果我有一个包含translate3d转换的父类，这似乎不被尊重。我没有看到什么？我尝试了其他webkit变换像样式和转换原始选项，但没有运气。

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.

我附加了一个JSFiddle有一个例子，我会期望黄色框

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.

http://jsfiddle.net/GMX5H/1/

这是一个简单版本的小提琴：

This is a simplified version of the fiddle:

<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; 
                box-shadow: 3px 3px 3px #333; 
                height: 20px; left: 0px;'>
        Inner block
    </div>
</div>

任何使translate3d与固定位置的孩子一起工作的指针将受到赞赏。

Any pointers to make the translate3d work with a fixed-positioned children will be appreciated.

推荐答案

这是因为 transform 创建了一个新的局部坐标系， href =http://www.w3.org/TR/css3-2d-transforms/#transform-rendering> W3C规格：

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

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

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.

Meyer的文章：使用CSS变换取消固定固定元素。

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

这篇关于'transform3d'不能使用position：fixed children的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！