从父div中推下子div

Question

我有像这样的HTML标记

<div class="relative">
     <div id="absolute">
        <p>absolute content</p>
     </div>  
   <p>Parent div</p>
</div>
<div>outer content</div>

和css是

.relative {
  position: relative;
  width: 600px;
  height: 400px;
  background: #ddd;
}
#absolute {
  position: absolute;
  top: 120px;
  right: 0;
  width: 300px;
  height: 200px;
  background: #eee;
}

现在由于某种原因，我想从子父（id = relative）中取出子div（id = absolute），同时按下父div下面的任何内容。

这就是我想要的，

感谢任何帮助

Answer 1

试试这个 - http://jsfiddle.net/8eXEE/

<强> HTML

<div class="relative">
     <div id="absolute">
        <p>absolute content</p>
     </div>  
   <p>Parent div</p>
</div>
<div style="background-color:#ff0000; width:400px; height:100px; position: relative; top:200px;">outer content</div>

<强> CSS

.relative {
  position: relative;
  width: 600px;
  height: 400px;
  background: #ddd;
}
#absolute {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 300px;
  height: 200px;
  background: #eee;
    margin-bottom: -200px;
}

Answer 2

如果您的#absolute divs高度没有动态变化（即始终保持200px）

标记

<div class="relative">
     <div id="absolute">
        <p>absolute content</p>
     </div>  
   <p>Parent div</p>
</div>
<div id="outer">outer content</div>

CSS

.relative {
  position: relative;
  width: 600px;
  height: 400px;
  background: #ddd;
}

#absolute {
  position: absolute;
  top: 100%;
  left: 0;
  width: 300px;
  height: 200px;
  background: #eee;
}

#outer {
  position:relative;
  margin-top:200px;
  background:blue;
}

以下是plunker，您可以使用它。