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

如何相对定位一个元素，而不让它在文档流中占用空间？

您尝试的操作听起来像是绝对定位。但是，另一方面，您可以创建一个伪相对元素，方法是创建一个零宽度、零高度、相对定位的元素，基本上仅用于创建位置参考点，以及其中的绝对定位元素：

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

你好，我离我应该在的地方有100像素的偏移，从顶部和左侧。

添加与移动的像素相等的边距：

范例

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

---

从上面看，似乎只要父元素处于相对位置，就可以确定元素的绝对位置。这意味着如果您有CSS：

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

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

---

对我来说，给定的解决方案并不奏效。 我想看到h3，而不是文本，然后是引导面板，垂直于这个面板，我想看到右侧的其他面板

我用一个高度为0的包装器来管理它，然后是位置：relative；左：100%

你好
怎么了
小组标题
面板主体

小组标题
面板主体

第2组标题
面板主体

您只需通过设置

位置：绝对

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

左上右

和

下

样式属性，让其断点随内容的动态流自由移动，这将迫使其动态使用流的相对端点。这样，绝对定位的元素将跟随文档流，同时避免占用空间

---

不需要假包装

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

在这下面。。。
.好的{
背景：黄色；
位置：绝对位置；
右：0；
}
东西！
但是，top=与本段相同

上面的示例设置了一个元素

• 使用纯粹简单的CSS，而不是其他
• 垂直定位，就像它在流中一样（默认

  top

  设置）
• 水平放置在页面的右边缘（

  right:0

  ）
• 不会占用任何空间，但会随着页面滚动而自然移动（

  位置：绝对

  ）

---

是否需要相对定位？绝对定位的元素将从文档流中删除。不知何故，对我来说比其他答案更有意义。这是否有效？我正在chrome上试用，但似乎不起作用。我用它来定位slidesjs中的导航按钮，这样也会弄乱它；右边距：-25px当您希望使其相对于屏幕右侧，以便右或左的值更小且更易于管理时。请记住，对于正的

顶部：

值，您需要

边距底部：

等于元素高度的负数，而不是位移。在这种情况下，如何继承宽度？由于相对div宽度为0，因此如果绝对div和绝对div都位于同一个位置，则它们将无法正确继承宽度container@AlexH不幸的是，这种方法并没有提供一种实现这一点的方法。我建议在这种情况下尝试FredK的负位置/负边距方法。一个简单的示例代码可能比阅读和理解整个段落更有帮助。尽管概念很清楚，但这只适用于受限情况下，我们确实不打算使用坐标将绝对元素移动到任何位置。这感觉很不自然，因为它很可能与流的下一个元素重叠。John T.举了一个例子，但建议设置一个坐标，如果我们愿意的话，将其移到一边。相对包装器解决方案正是能够使用相对坐标，因此对它的需要取决于OP真正想要什么。生成的坐标取决于其最内层的父坐标（我的意思是使用position属性，而不是坐标），在您的示例中，它是主体，但可能不同。然而，另一个包装器或恼人的坐标计算可能会爬上这一步。我还没有测试，但我认为你是对的；我的过于简化的解决方案可能只适用于这种最简单的形式，但当深入到一堆元素中时，效果不如在普通网页中好。啊，CSS，你为什么这么沮丧？