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

例子

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

通过阅读，似乎只要父元素相对定位，您就可以绝对定位一个元素。这意味着如果你有CSS:

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

那么子元素就不会在文档流中占用任何空间。然后你可以使用“left”，“bottom”等属性来定位它。在父元素上的相对位置通常不会影响它，因为如果你没有指定“left”、“bottom”等，它将默认位于其原始位置。

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

你想做的听起来像是绝对定位。另一方面，你可以创建一个伪相对元素，通过创建一个零宽零高的相对定位元素，本质上只是为了创建一个位置的参考点，以及其中的一个绝对定位元素:

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

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

例子

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

您只需通过设置position: absolute将该元素从文档流中移除，并让它的断点随内容的动态流自由移动，而不指定左、上、右和下样式属性，这将迫使它动态地使用流的相对端点。这样，绝对定位的元素将跟随文档流，同时将自己从占用空间中移除。

不需要假包装。

@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，没有其他 垂直定位，就像它在流中一样(默认顶部设置) 水平定位于页面的右边缘(右:0) 不占用任何空间，但会随着页面滚动而自然移动(位置:绝对)