CSS3-transform-transform影响子级的固定定位

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

<div class="wrap">            <div class="box">            </div>        </div>

.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定位的子元素的定位都将转变为相对于其绝对定位。==