CSS转换与固定元素冲突 [英] CSS Transform conflict with fixed element

问题描述

关注该主题

当我将css转换应用于父元素时，子元素不再固定。

When I apply css transform to parent element, child element is not fixed anymore.

http://jsfiddle.net/z8fBD/7/

已经尝试过

在删除 transform时：translate（0％，0px）; 一切正常，但正如您从上一主题中了解的那样，我的动画需要它

when you remove transform: translate(0%,0px); everything works just fine, but as you will understand from previous topic, I need this for my animation

推荐答案

您是说此举吗？ 按钮应该保持原状？如果是这样，您需要将转换应用于容器元素，因为主体（应考虑重命名此div）将转换其所有子代。要做的更改如下：

Do you mean the move 'button' should stay put? If so, you need to apply the transform to the container element since the body (you should consider renaming this div) will transform all its children. Here are the changes to do that:

JS：

jQuery(document).ready(function($){
    $('#move').click(function(){
        if(!$('#container').hasClass('move')){
            $('#container').addClass('move');
        } else {
            $('#container').removeClass('move');
        }
    })
})

CSS：

#body {
    position:absolute;
    left: 0;
    top:0;
    width: 200px;
}
#container {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-transform: translate(0%,0px);
    -moz-transform: translate(0%,0px);
    -ms-transform: translate(0%,0px);
    -o-transform: translate(0%,0px);
    transform: translate(0%,0px);
}
#container.move {
    -webkit-transform: translate(150%,0px);
    -moz-transform: translate(150%,0px);
    -ms-transform: translate(150%,0px);
    -o-transform: translate(150%,0px);
    transform: translate(150%,0px);

其余的CSS保持不变。注意身上的样式是如何移到#container的。

The rest of the CSS stays the same. Note how styles that were on the body were moved to #container.

这篇关于CSS转换与固定元素冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！