Question

在花了很多时间编写网站后，我的整个计划似乎已经破灭了。我发现我无法用“修复”来定位任何元素。 - 他们不会工作。经过一些研究，我认为这与元素的父元素包含多个转换这一事实有关，这意味着你不能拥有一个固定的元素，因为它现在没有固定到视口，而是固定到父和＃39;转换。

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

我不确定是否有任何修复此问题，或某种方式来解决可能与jQuery或其他问题。请帮帮我！如果需要，我可以提供一些代码。

谢谢！ http://wtfhtmlcss.com/#position-transforms

这是一些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%;
}

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

然后有DIV我已经设置固定定位并且不会修复。

Answer 1

CSS Transforms Module Level 1说

对于布局由CSS框模型控制的元素，任何值除none以外的转换导致创建堆叠上下文和包含块。该对象充当包含固定位置后代的块。

然而，似乎没有达成共识：

问题1：这对position: fixed的影响是否必要？如果是这样，这里需要详细介绍固定定位物体的原因应该这样做，即，否则实施起来要困难得多。请参阅Bug 16328。

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

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

使用具有变换的父元素固定定位

1 个答案: