relative和absolute的区别

这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别，定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在，而定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流中的位置不在存在。

详解CSS+DIV布局定位

在用CSS+DIV进行布局定位的时候，一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚，以致经常会出现让人很郁闷的结果。今天研究了一下，总算有所了解。在此总结一下：

先看下position各个属性值的定义：

1、static：默认值。没有定位，元素出现在正常的流中（忽略top,bottom,left,right或者z-index声明）。

2、relative：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-index进行层次分级。

3、absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。可通过z-index进行层次分级。

4、fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。可通过z-index进行层次分级。

static与fixed的定位方式较好理解，在此不做分析。下面对应用的较多的relative和absolute进行分析：

1、relative。

定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在。如图1：

黄色背景的层定位为relative，红色边框区域为其在正常流中的位置。在通过top、left对其定位后，从灰色背景层的位置可以看出其正常位置依然存在。

2、absolute。

定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流中的位置不在存在。如图2：

可以看到，在将黄色背景层定位为absolute后，灰色背景层自动补上。

3、relative与absolute的主要区别：

首先，是上面已经提到过的在正常流中的位置存在与否。

其次，relative定位的层总是相对于其最近的父元素，无论其父元素是何种定位方式。如图3：

图中，红色背景层为relative定位，其直接父元素绿色背景层为默认的static定位。红色背景层的位置为相对绿色背景层top、left个20元素。而如果红色背景层定位为absolute，则情形如图4：

可以看到，红色背景层依然定义top:20px；left:20px；但其相对的元素变为定位方式为absolute或relative的黄色背景层。因此，对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层，而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative，则其将相对body进行定位，如图5：

除top、left、right、bottom定位外，margin属性值的定义也符合上述规则。

转载于:https://www.cnblogs.com/handsomeboyyyyyy/p/7203649.html

relative和absolute的区别相关推荐

HTML之position:absolute relative static fixed的区别和理解
HTML之position:absolute relative static fixed的区别在理解position:absolute relative static fixed的区别时,我们先需要 ...
relative，absolute，fixed的区别及具体用法
内容来自阮一峰的博客http://www.ruanyifeng.com/blog/2019/11/css-position.html 觉得比较通俗易懂,所以就复制过来了. relative.absol ...
[css] position的relative和absolute定位原点是哪里？
[css] position的relative和absolute定位原点是哪里? absolute: 定位原点为第一个position不为static的父级元素的左上角. 可以基于该特性实现heigh ...
relative和absolute使用
relative和absolute使用开发工具与关键技术:DW 作者:黄金燕年级: 1805 撰写时间: 2019年2月16日 relative相对定位,absolute绝对定位某个元素,disp ...
CSSposition定位（relative、absolute、fixed、sticky）
这一周,我在逆战班学习了很多,具体介绍一下position相对定位和绝对定位,希望可以帮助到你. **position定位 ** position 的五个属性:static(默认).relative. ...
CSS中position的relative和absolute.
2021 first note CSS中position的relative和absolute. 之前接触过, 听老师讲的时候, 赶脚自己挺明白的, 后来就放下了, 最近又开始复习, 发现有些熟悉但更多 ...
relative和absolute的使用(详细+案例)
相对定位relative:相对于自己原先的位置而调整位置+会占用原先位置 eg: 原先位置(在没有加top,left,right,bottom调整位置) 根据原先位置加top而调整定位绝对定位abs ...
position的值， relative和absolute分别是相对于谁进行定位，你真的知道吗？
常见的position定位方式如下: static 默认值.元素出现在正常的普通流中 relative 生成相对定位的元素,相对于其在普通流中的位置进行偏移. fixed (老IE不支持)生成绝对定位 ...
relative、absolute定位居中以及小总结
relative.absolute 定位小总结: 一.relative 定位总结: 特点: 1.除了位置被left等四个属性影响,对元素没有任何影响(大小) 2.只设置position属性,元素没有任 ...

relative和absolute的区别

relative和absolute的区别相关推荐

最新文章

热门文章