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

然后，子元素将不会占用文档流中的任何空间。然后，您可以使用“left”，“bottom”等属性之一来定位它。父级的相对位置通常不会影响它，因为如果你没有指定“left”，“bottom”等，默认情况下它会定位在原来的位置。

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

Answer 4

您只需设置position: absolute即可将该元素从文档流中删除，并通过不指定left top right并使其动态流动内容自由移动bottom样式属性，它将强制它动态地使用流的相对端点。这样，绝对定位的元素将遵循文档流程，同时将其自身从占用空间中移除。

不需要虚拟包装器。

Answer 5

对我来说，给定的解决方案并没有奏效。我希望看到一个h3，而不是文本，然后在Bootstrap面板之后，与这个面板垂直同步，我想看到右侧的其他面板，

我使用高度：0包装并在该位置之后管理：相对;左：100％。

＆＃13;

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

＆＃13;

Answer 6

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

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

6 个答案: