位置相对与绝对？

Question

CSS position: relative和position: absoluteCSS有什么区别？什么时候应该使用哪个？

Answer 1

绝对CSS定位

position: absolute;

绝对定位是最容易理解的.您从CSS position属性开始:

position: absolute;

这告诉浏览器应该从文档的正常流程中删除要定位的内容,并将其放置在页面上的确切位置.它不会影响HTML之前或之后的元素如何定位在网页上,但除非您覆盖它,否则它将受父母的定位影响.

如果你想一个元素从文档窗口的顶部10个像素的位置,你会使用top偏移position它有与absolute定位:

position: absolute;
top: 10px;

然后10px,无论内容通过,在元素下方或上方(视觉上),该元素将始终从页面顶部显示.

四个定位属性是:

1. top
2. right
3. bottom
4. left

要使用它们,您需要将它们视为偏移属性.换句话说,定位的元素right: 2px不会向右移动2px.它的右侧偏离窗口的右侧(或其位置覆盖父级)2px.其他三个也是如此.

相对定位

position: relative;

相对定位使用与定位相同的四个定位属性absolute.但是,不是将元素的位置基于浏览器视图端口,而是在元素仍处于正常流程中时从元素的位置开始.

例如,如果您的网页上有三个段落,而第三个段落上有一个position: relative样式,则其位置将根据其当前位置而不是视图端口的原始边缘进行偏移.

第1段.

第2段.

第3段.

在上面的示例中,第三个段落将位于3em容器元素的左侧,但仍将位于前两个段落的下方.它将保留在文档的正常流程中,并且稍微偏移.如果您将其更改为position: absolute;,则其后面的任何内容都会显示在其上,因为它将不再处于文档的正常流程中.

笔记:

• 默认width的是绝对定位的元素的是在其中的内容的宽度,不同于被相对定位在那里它的默认的元素width是100%该空间也可以填充的.

• 您可以使用与绝对定位元素重叠的元素,而不能使用相对定位的元素(原生地,即不使用负边距/定位)执行此操作

从这个资源中拉出来的

Answer 2

"相对"和"绝对"定位都是相对的,只是具有不同的框架."绝对"定位是相对于另一个封闭元素的位置."相对"定位是相对于元素本身没有定位的位置.

这取决于您使用的需求和目标.当您希望将元素从元素流中的位置移位时,"相对"位置是合适的,例如,使某些字符出现在上标位置."绝对"定位适合于将元素放置在由另一个元素设置的某个坐标系中,例如用一些文本"叠印"图像.

作为一个特殊的,使用"相对"定位,没有位移(只是设置position: relative),使元素成为引用框架,这样你就可以对其中的元素(标记)使用"绝对"定位.

Answer 3

另外需要注意的是,如果您希望将绝对元素限制为父元素,则需要将父元素的位置设置为relative.这将使子元素保持在父元素中,并且它不会与整个窗口"相对".

我写了一篇博文,给出了一个创建以下影响的简单示例:

它有一个绿色div,绝对位于父黄色div的底部.

1 http://blog.troygrosfield.com/2013/02/11/working-with-css-positions-creating-a-simple-progress-bar/

Answer 4

相对位置:

如果指定position:relative,则可以使用top或bottom,left或right来相对于文档中通常出现的位置移动元素.

位置绝对:

当您指定position:absolute时,该元素将从文档中删除,并准确放置在您告诉它的位置.

这是一个很好的教程http://www.barelyfitz.com/screencast/html-training/css/positioning/,其中两个位置的样本用法分别与绝对和相对位置相对应.

Answer 5

相对: 相对于它的当前位置,但可以移动.或者RELATIVE定位元素相对于ITSELF定位.

绝对: ABSOLUTE定位元素相对于IT最关闭的定位父母定位.如果有一个,那么它就像固定的.....相对于窗口.

<div style="position:relative"> <!--2nd parent div-->
    <div>   <!--1st parent div-->
        <div style="position:absolute;left:10px;....."> <!--Middle div-->
          Md. Arif
       </div>
    </div>
</div>

这里,第二个父div位置是相对的,因此中间div将改变它相对于第二个父级的位置div.如果第一个父级div位置是相对的,那么中间div将改变它相对于第一个父级的位置div.细节