相对放置一个元素，而不占用文档stream中的空间
我怎样才能相对定位一个元素，让它不占用文档stream中的空间？
你想要做什么听起来像绝对定位。 另一方面，可以通过创build一个零宽度，零高度，相对定位的元素（基本上只是为了创build位置的参考点）和一个绝对定位的元素来创build伪相关元素其中：
<div style="position: relative; width: 0; height: 0"> <div style="position: absolute; left: 100px; top: 100px"> Hi there, I'm 100px offset from where I ought to be, from the top and left. </div> </div> 添加一个等于您移动的像素的边距：
例
.box { position: relative; top: -30px; margin-bottom: -30px; }
从阅读起来，只要父元素相对定位，似乎可以绝对定位一个元素。 这意味着如果你有CSS：
.parent { position: relative; } .parent > .child { position: absolute; }
然后，子元素将不会占用文档stream中的任何空间。 然后你可以使用“左”，“底”等属性之一来定位它。 父母的相对位置通常不会影响它，因为如果不指定“左”，“下”等，默认情况下它将定位在原始位置。
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
对我来说，给定的解决scheme没有很好地工作。 我想看到一个h3，而不是文本和之后，Bootstrap面板，垂直synchroneous这个面板我想看到右侧的其他面板，
我用一个高度为0的包装器和后面的位置来pipe理它：relative; left：100％。
<link href="bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-md-9"> <div class="col-md-12"> <h3> hello </h3> </div> <div class="col-md-12"> <span> whats up? </span> </div> <div style="height:0" class="col-md-12"> <div style="left:100%" class="col-md-3"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Panel title</h3> </div> <div class="panel-body"> <p>Panel Body</p> </div> </div> </div> </div> <div class="col-md-12"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Panel title</h3> </div> <div class="panel-body"> <p>Panel Body</p> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Panel2 title</h3> </div> <div class="panel-body"> <p>Panel Body</p> </div> </div> </div> </div> <div class="col-md-3"> <!--placeholder--> </div> </div> </div>
您只需通过设置position: absolute来从文档stream中取出该元素，并使其断点随着内容的dynamicstream动自由移动， 而不指定left top right和bottom样式属性，这将迫使其使用相对端点stream动的dynamic。 通过这种方式，绝对定位的元素将遵循文档stream程，同时消除占用空间。
没有虚拟包装是必要的。
