CSS3中transform影响子级的固定定位代码实例

在进行限制范围拖拽代码编写时，父级为固定定位，子级为固定定位，给父级加transform，html和css代码分别如下：

.wrap{
        position:fixed;
        width:600px;
        height:600px;
        border:10px solid #000; 
        left:50%;
        top:50%;
        transform: translateX(-50%) translateY(-50%);

        }
.box{
            position:fixed;
            width:100px;
            height:100px;
            background-color: red;
            left:50%;
            top:50%;
    }

在js中通过offset来获取box的left和top,在确保了js代码无错的情况下，发现box的left值为0时,贴着wrap的左边框。

按照css设置的，box为固定定位，其定位的父级是可视区，当left为0时，应当贴着窗口左侧。

按照定位属性来推断，此时box的定位父级已经由窗口转变为wrap。如果修改wrap的css代码如下:

.wrap{
                position:fixed;
                width:600px;
                height:600px;
                border:10px solid #000; 
                left:50%;
                top:50%;
                margin:-300px 0 0 -300px;
            }

发现不会出现以上现象。至此可断定之所以出现先前的现象，是使用transform带来的bug：==当父级使用transform后，它所有使用fixed定位的子元素的定位都将转变为相对于其绝对定位。==