固定定位，父元素具有转换

After spending much time coding a website, my whole plan seems to have just shattered. I came across that I was unable to position any elements with 'fixed' - they just wouldn't work. After some research, I figured it was to do with the fact that the element's parent contains several transformations and this means that you are unable to have a fixed element as it is not now fixed to the viewport, but to the parent's transformations.

在花了很多时间为一个网站编写代码之后，我的整个计划似乎都失败了。我发现我无法定位任何“固定”的元素——它们就是不能工作。经过一些研究，我认为这与元素的父元素包含几个转换有关，这意味着您无法拥有一个固定的元素，因为它现在不是固定在viewport上，而是固定在父元素的转换上。

I NEED to be able to use fixed positioning, but my whole HTML code is inside this div with the transformations - and I can't change that as it's a fundamental part of the design.

我需要能够使用固定的定位，但是我的整个HTML代码都在这个div中进行转换——我不能改变它，因为它是设计的基本部分。

Im not to sure if there is any fix for this, or some way to get around the problem possibly with jQuery or something. Please help me out! If it's required I can provide some code.

我不确定这个问题是否有解决方案，或者用jQuery或其他方法解决这个问题。请帮帮我!如果需要的话，我可以提供一些代码。

Thank you! http://wtfhtmlcss.com/#position-transforms

谢谢你们！http://wtfhtmlcss.com/ position-transforms

Here is some CSS:

这里是一些CSS:

.container {
    background: #fff;
    min-height: 100%;
    position: relative;
    outline: 1px solid rgba(0,0,0,0);
    z-index: 10;
    -webkit-transform: translateZ(0) translateX(0) rotateY(0deg);  reset transforms (Chrome bug) 
    transform: translateZ(0) translateX(0) rotateY(0deg);
}


.container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0px;
    opacity: 0;
    background: rgba(0,0,0,0.2);
    /* the transition delay of the height needs to be synced with the container transition time */
    -webkit-transition: opacity 0.4s, height 0s 0.4s;
    transition: opacity 0.4s, height 0s 0.4s;
} 


.animate .container::after {
    opacity: 1;
    height: 101%;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

/* Effect Move Left */
.effect-moveleft {
    background-color: rgb(50,50,130);
}

.effect-moveleft .container {
    -webkit-transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

.effect-moveleft .container::after {
    background: rgba(255,255,255,0.6);
}

.effect-moveleft.animate .container {
    -webkit-transform: translateX(-50%) rotateY(45deg) translateZ(-50px);
    transform: translateX(-50%) rotateY(45deg) translateZ(-50px);
}

.no-csstransforms3d .effect-moveleft.animate .container {
    left: -75%;
}

The container obviously contains the whole body code.

容器显然包含整个主体代码。

Then there is the DIV which I have set to fixed positioning and which won't fix.

还有一个DIV，我把它设置为固定位置，它不会修复。

1 个解决方案

#1

The CSS Transforms Module Level 1 says

CSS转换模块一级说。

For elements whose layout is governed by the CSS box model, 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.

对于由CSS box模型控制布局的元素，除了none以外的任何值都将导致创建堆栈上下文和包含块。对象作为固定位置的子代的一个包含块。

However, it seems there isn't consensus:

然而，似乎并没有达成共识:

ISSUE 1: Is this effect on position: fixed necessary? If so, need to go into more detail here about why fixed positioned objects should do this, i.e., that it’s much harder to implement otherwise. See Bug 16328.

问题1:这对头寸的影响是固定的吗?如果是，需要在这里更详细地说明为什么固定位置的对象应该这样做，例如。，否则就更难实现了。看到错误16328。

So you can wait and maybe the spec will be changed.

你可以等一下，也许规格会改变。

But a better approach would be moving your fixed element outside the transormed element.

但是更好的方法是将固定元素移出transormed元素。

1 个解决方案

#1

更多相关文章

随机推荐