position：absolute与position：relative的区别

absolute意思为绝对的，relative意为相对的。然而其用法与我们平常所想的有所不同。

大多数人可能会觉得absolute绝对定位是根据浏览器窗口定位，实则不是。absolute定位是相对于父元素的绝对定位，且父元素必须有position：absolute或者position：relative，若其父元素没有，则逐层网上寻找，直至浏览器窗口

relative相对定位是相对于当前位置定位，即相对于自己定位。

<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
</style>
</head><body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body></html>

以上代码执行结果如下：

在使用绝对定位时，除了该元素使用position：absolute之外，一般在其上一级父元素上使用position：relative，而不在最外层的元素（例如div）上应用，这是相对定位的最小化原则，避免最外层元素因位置变动而影响整个页面布局。

参考张鑫旭老师的文章，推荐如下定位：

absolute+margin（左上角元素定位，作用于当前元素）、float+relative（右上角元素定位，作用于当前元素）和relative+absolute（右下角元素定位，直接父标签+当前定位元素）

position：absolute与position：relative的区别相关推荐

区分position:relative； position:absolute； position:fixed
区分position:relative; position:absolute; position:fixed 对于position:relative; position:absolute; posit ...
CSS 元素的绝对定位 position: absolute 和 position: fixed
当一个元素的 position属性设置为 absolute 或 fixed,它将使用绝对定位.绝对定位的元素将从文档流中完全删除,它原先在正常文档流中所占的空间会关闭,就好像该元素不存在一样,因此不会 ...
HTML之position:absolute relative static fixed的区别和理解
HTML之position:absolute relative static fixed的区别在理解position:absolute relative static fixed的区别时,我们先需要 ...
position中的absolute与relative的区别
Position(位置)属性值需要注意的地方 position的属性有: Absolute:绝对定位,是相对于最近的且不是static定位的第一个父元素来定位,元素位置通过"right&qu ...
position absolute 与 relative 区别
position absolute 与 relative 区别 absolute 绝对定位元素可以放置到页面上的任何位置 relative 相对定位会按照元素的原始位置对该元素进行移动
position：absolute与relative的区别
Absolute,CSS中的写法是:position:absolute; 他的意思是绝对定位,他是参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位,在没有 ...
position的值，以及absolute和relative的区别
在 CSS 中,元素的 position 属性有五种取值: static:默认值,元素按照正常的流动方式排列. relative:元素的位置相对于它在正常流中的位置进行定位. absolute:元素的 ...
Position属性四个值：static、fixed、absolute和relative的区别和用法
在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果.今天研究了一下,总算有所 ...
positio:absolute与position:relative的区别
absolute 能让元素 inline-block 化: 例如一个div标签默认宽度是100%显示的,但是一旦被absolute属性缠上,则100%默认宽度就会变成自适应内部元素的宽度. float ...

position：absolute与position：relative的区别

position：absolute与position：relative的区别相关推荐

最新文章

热门文章