相对定位元素而不占用文档流中的空间

Question

如何相对定位元素，并且使其不占用文档流中的空间？

Answer 1

您想要做的事情听起来像是绝对定位。另一方面，您可以通过创建零宽度、零高度、相对定位的元素（本质上仅用于创建位置参考点）和绝对定位元素来创建伪相对元素其中：

<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>

Answer 2

添加等于您移动的像素的边距：

示例

.box {
    position: relative;
    top: -30px; 
    margin-bottom: -30px;
}

Answer 3

稍微阅读一下，似乎只要父元素相对定位，就可以绝对定位元素。这意味着如果您有 CSS：

.parent { 
    position: relative; 
}
.parent > .child {
    position: absolute;
}

那么子元素根本不会占用文档流中的任何空间。然后，您可以使用“左”、“底”等属性之一来定位它。父级上的相对定位通常不会影响它，因为如果您不指定“左”、“下”等，默认情况下它将定位在其原始位置。

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

Answer 4

您只需通过设置

position: absolute

将该元素从文档流中取出，并通过 not 指定

left top right

和

bottom

样式属性，使其断点随内容的动态流自由移动，这将强制它动态使用流的相对端点。这样，绝对定位的元素将遵循文档流，同时消除自身占用的空间。

不需要虚拟包装纸。

Answer 5

@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，没有其他东西
• 垂直定位，就像在流中一样（默认

  top

  设置）
• 水平位于页面右边缘 (

  right: 0

  )
• 不占用任何空间，却会随着页面滚动而自然移动(

  position: absolute

  )

Answer 6

对我来说，给定的解决方案效果不佳。 我想看到一个 h3，而不是文本，然后是 Bootstrap 面板，与该面板垂直同步，我想看到右侧的其他面板，

我使用 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>