相对放置元素而不占用文档流中的空间

186

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

— 网站设计者
source

2

是否需要相对定位？绝对定位的元素将从文档流中删除。

— 杰森·根纳罗

280

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

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

— 夜猫
source

在这种情况下，您将如何继承宽度？由于相对div宽度为0，因此绝对div如果都在容器中，则不能正确继承宽度

— Alex H

@AlexH不幸的是，此方法没有提供实现此目的的方法。我建议在这种情况下尝试FredK的负位置/负边距方法。

— Nightfirecat

101

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

例

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

— 弗雷德·K
source

5

在某种程度上，我比其他答案更有意义

— markasoftware 2013年

2

这样行吗？我在chrome中尝试，似乎没有用。我正在使用它来定位来自slidesjs的导航按钮，因此也可能使它混乱。

— Petruza 2014年

1

我尝试过这种方法，left: -25px; margin-right: -25px;由于某种原因，它仍然使同级元素水平偏移2-3个像素。

— 迈克

float:right;当您要使其相对于屏幕右侧时，请包括的使用，以使right或left的值可以更小且更易于管理。

— 达米安·格林

记住正值，top:您需要margin-bottom:等于元件高度的负数而不是位移

— Heelis先生

21

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

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

然后，child元素将根本不占用文档流中的任何空间。然后，您可以使用“左侧”，“底部”等属性之一对其进行定位。父对象上的相对位置通常不应该影响它，因为如果您不指定“ left”，“ bottom”等，默认情况下它将位于其原始位置。

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

— 喷气机
source

3

您只需通过设置将元素从文档流中移开position: absolute，然后通过不指定left top right和bottom样式属性（将迫使其动态使用流的相对端点）来使其断点随动态内容流自由移动。这样，绝对定位的元素将跟随文档流，同时将自己从占用的空间中移开。

不需要伪包装器。

— 贝基姆·巴卡伊（Bekim Bacaj）
source

一个简单的示例代码可能会帮助更多，而不是阅读和理解整个过程。尽管概念很清楚

— MR_AMDEV

0

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

我用一个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>

展开摘要

— 雷纳
source

0

@Bekim Bacaj对我来说是一个完美的答案，即使这可能不是OP所要的（尽管他的问题留有解释的余地）。话虽如此，贝基姆没有提供一个例子。

<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）自然移动

— 约翰·T
source