我如何相对定位一个元素，并让它不占用文档流中的空间?
当前回答
对我来说，给出的解并不管用。 我想看到一个h3，比文本之后，引导面板，垂直同步到这个面板，我想看到其他面板在右侧，
我使用了一个height:0的包装器，在这个位置之后:relative;left:100%。
<link href="https://netdna.bootstrapcdn.com/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>
其他回答
对我来说，给出的解并不管用。 我想看到一个h3，比文本之后，引导面板，垂直同步到这个面板，我想看到其他面板在右侧，
我使用了一个height:0的包装器，在这个位置之后:relative;left:100%。
<link href="https://netdna.bootstrapcdn.com/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将该元素从文档流中移除，并让它的断点随内容的动态流自由移动，而不指定左、上、右和下样式属性，这将迫使它动态地使用流的相对端点。这样，绝对定位的元素将跟随文档流，同时将自己从占用空间中移除。
不需要假包装。
@Bekim Bacaj给了我完美的答案，尽管这可能不是OP想要的(尽管他的问题有解释的余地)。话虽如此，Bekim并没有提供一个例子。
<h1>Beneath this...</h1>
<style>
.HoverRight {
background: yellow;
position: absolute;
right: 0;
}
</style>
<div class="HoverRight">Stuff and Things!</div>
<p>but, top = same as this paragraph.</p>
上面的例子设置了一个元素…
使用纯粹和简单的CSS，没有其他 垂直定位，就像它在流中一样(默认顶部设置) 水平定位于页面的右边缘(右:0) 不占用任何空间，但会随着页面滚动而自然移动(位置:绝对)
你想做的听起来像是绝对定位。另一方面，你可以创建一个伪相对元素，通过创建一个零宽零高的相对定位元素，本质上只是为了创建一个位置的参考点，以及其中的一个绝对定位元素:
<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;
}
