我如何相对定位一个元素,并让它不占用文档流中的空间?


当前回答

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

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

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

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

其他回答

对我来说,给出的解并不管用。 我想看到一个h3,比文本之后,引导面板,垂直同步到这个面板,我想看到其他面板在右侧,

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

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

例子

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

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

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

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

不需要假包装。

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

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

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

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