jquery - 从相对定位的 parent 那里释放绝对定位的 child

就是这种情况

HTML：

   <div id="cw">
        <div id="c"></div>
   </div>
   <a href="#">click me</a>

CSS：

#cw {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 100px 200px 0 200px;
    padding: 10px;
}

#c {
    background: blue;
    display: block;
    height: 200px;
    width: 200px;
}

-> http://jsfiddle.net/F6FF2/4/

现在，我想要达到的目标是这个。如果单击“单击我”链接，则内部容器#c应该从其在页面上呈现的位置扩展到窗口的整个范围。

我认为这只能通过将position: absolute分配给元素来实现。但是随后我遇到了一个问题，即其父对象是相对的。

因此，到目前为止，我想出的是克隆#c，将其从DOM中删除，并将克隆附加到body，然后对其进行动画处理以实现所需的效果。但是，问题是，如果#c例如包含Google Map，则在克隆事件之后必须重新实例化该地图（而不是仅刷新图块）。

除了这个解决方案看起来很混乱之外。必须有一个更好，更清洁的解决方案。

有任何想法吗？

最佳答案

您正在此处覆盖内容（地图）：

c.text(c_width+" > "+c_height+" > "+c_left+" > "+c_top);

不要覆盖内容，也不要使用克隆（移动原始），而是在确定动画时触发resize-event：

http://jsfiddle.net/F6FF2/10/