'transform3d'不适用于位置：固定子级

  • Z时代
  • 2024-01-10
  • 分类：问答

我在哪里，在正常情况下，CSS，固定股利将正好它被指定的（定位的情况下top:0px，left:0px）。

如果我的父母有一个translate3d转换，这似乎不被尊重。我没看到什么吗？我尝试了其他webkit转换，例如样式和转换原点选项，但是没有运气。

我在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与固定位置的子级一起工作？

回答：

这是因为transform按[W3C规范，会创建一个新的本地坐标系：

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

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

我目前不知道有解决方法。

以上是 &#39;transform3d&#39;不适用于位置：固定子级 的全部内容， 来源链接： utcz.com/qa/404902.html

回到顶部