CSS 变换与固定元素冲突答案

【问题标题】：CSS Transform conflict with fixed elementCSS 变换与固定元素冲突
【发布时间】：2013-11-22 05:07:55
【问题描述】：

Follow up on this topic

当我对父元素应用 css 变换时，子元素不再固定。

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

曾尝试只使用一种方向变换但没有成功。

当您删除 transform: translate(0%,0px); 时，一切正常，但正如您从上一个主题中了解的那样，我的动画需要这个

【问题讨论】：

标签： html css css-transforms

【解决方案1】：

你的意思是移动“按钮”应该留在原地吗？如果是这样，您需要将转换应用于容器元素，因为主体（您应该考虑重命名此 div）将转换其所有子元素。以下是为此所做的更改：

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 的其余部分保持不变。注意 body 上的样式是如何移动到 #container 的。

【讨论】：