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

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 rightbottom

不需要虚拟包装纸。