Html 相对定位元素而不占用文档流中的空间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6040005/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Relatively position an element without it taking up space in document flow
提问by Web_Designer
How can I relatively position an element, and have it not take up space in the document flow?
如何相对定位一个元素，并且不占用文档流中的空间？
回答by Nightfirecat
What you're trying to do sounds like absolute positioning. On the other hand, you can, however, make a pseudo-relative element, by creating a zero-width, zero-height, relatively positioned element, essentially solely for the purpose of creating a reference point for position, and an absolutely positioned element within that:
您正在尝试做的事情听起来像是绝对定位。但是，另一方面，您可以创建一个伪相对元素，方法是创建一个零宽度、零高度、相对定位的元素，基本上只是为了创建位置的参考点，以及一个绝对定位的元素其中：
<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>
回答by Fred K
Add a margin equal to the pixels that you moved:
添加等于您移动的像素的边距：
Example
例子
.box {
position: relative;
top: -30px;
margin-bottom: -30px;
}
回答by jeteon
From reading up a little, it seems you can absolute position an element as long as the parent element is relatively positioned. That means if you have the CSS:
稍微阅读一下，似乎只要父元素是相对定位的，您就可以绝对定位元素。这意味着如果你有 CSS：
.parent {
position: relative;
}
.parent > .child {
position: absolute;
}
Then the child element won't take up any space in the document flow at all. You can then position it using one of the "left", "bottom", etc, properties. The relative positioning on the parent shouldn't usually affect it because it will be positioned at its original position by default if you don't specify "left", "bottom", etc.
那么子元素根本不会占用文档流中的任何空间。然后，您可以使用“左侧”、“底部”等属性之一来定位它。父级上的相对定位通常不会影响它，因为如果您不指定“left”、“bottom”等，它会默认定位在其原始位置。
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
回答by Bekim Bacaj
You simply take that element off the document flow by setting position: absolute, and leave it's breaking point move freely with the dynamic flow of content by notspecifying the left top rightand bottomstyle properties which will be forcing it to use the relative endpoint of the flow dynamically. This way the absolutely positioned element will follow the document flow while removing itself from taking up the space.
您只需通过设置从文档流中删除该元素position: absolute，并通过不指定将强制它动态使用流的相对端点的left top right和bottom样式 属性，使其断点随内容的动态流自由移动。这样绝对定位的元素将遵循文档流，同时从占用空间中移除自己。
No dummy wrappers are needed.
不需要虚拟包装。
回答by John T.
@Bekim Bacaj had the perfect answer for me, even though it may not be exactly what the OP was looking for (although his question leaves room for interpretation). That being said, Bekim didn't provide an example.
@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>
The example above sets up an element that...
上面的例子设置了一个元素......
- uses pure and simple CSS and nothing else
- is vertically positioned as if it was in the flow (default
topsetting) - is horizontally positioned at the right edge of the page (
right: 0) - does not take up any space, yet will move naturally as the page scrolls (
position: absolute)
- 使用纯粹和简单的 CSS 而没有别的
- 垂直放置，就像在流中一样（默认
top设置） - 水平位于页面的右边缘 (
right: 0) - 不占用任何空间，但会随着页面滚动而自然移动 (
position: absolute)
回答by Reiner
For me the given solutions did not worked fine. I want to see a h3, than text and after that Bootstrap-panels, vertical-synchroneous to this panels i want to see other panels on the right side,
对我来说，给定的解决方案效果不佳。我想看到一个 h3，而不是文本，然后在 Bootstrap 面板之后，垂直同步到这个面板，我想在右侧看到其他面板，
I managed this with a height:0 wrapper and after that position:relative;left:100% .
我用 height:0 包装器管理这个，然后在 position: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>