| absolute |
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| fixed |
生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| relative |
生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
在用CSS+DIV进行布局的时候，一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚，以致经常会出现让人很郁闷的结果。今天研究了一下，总算有所了解。在此总结一下：
先看下各个属性值的定义：
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：
相关推荐
CSS中主要难以理解的属性包括盒型结构，以及定位。正如positioniseverything，本文将主要讲述关于position的理解，力求让您看完本文后对position有着最全面的认识。 position的四个属性值： relative absolute ...
其中absolute和relative是最常用的，fixed用得也比较多（其中IE6并不支持fixed）。 1、absolute（绝对定位） absolute是生成觉对定位的元素，脱离了文本流（即在文档中已经不占据位置），参照浏览器的左上角通过top,...
引用 static : 无特殊定位，对象遵循HTML定位规则 absolute : 将对象从文档流..."对于页面中一个static的div#demo，我想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地方，应该是用这个position:relative
CSS-position(定位）中的static、relative、fixed、absolute、sticky以及重叠的简单应用
position定位里的absolute，relative和fixed absolue：绝对定位，用top,bottom,left和right根据有定位的父级元素进行定位，如果无则相对body元素即整个页面文档进行定位。 relative：相对定位，相对自己原来的位置...
Position属性有四个值：static、fixed、absolute和relative， 后面两个在布局中的定位里是经常用到的，顾名思义， absolute是指绝对定位，即将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对...
position属性的相关定义：static：无特殊定位，对象遵循正常文档流;relative：对象遵循正常文档流;absolute：对象脱离正常文档流fixed：对象脱离正常文档流，有兴趣的朋友可以参考下哈
在html中，当一个div想要定位时，我们第一反应是position属性，而position属性除了默认值外，还有absolute,relative和fixed。当被设置成fixed时，可以通过设置left、right、top、bottom的值来相对于body定位。 代码...
但是涉及到弹出层、浮层、页面广告插件等等，都需要CSS中的position属性来定位了，对于初学者来说经常分不清楚是应该用position属性的absolute值、relative值、fixed值等等，下面我们就position属性基本的这三个值的...
在CSS中关于定位的内容是:position:relative | absolute | static | fixed。static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。在本文中，任何一个元素都被文本流所限制了自身的位置，但是...
position属性共有四种不同的定位方法，分别是static、fixed、relative、absolute。最后将会介绍和position属性密切相关的z-index属性。 第一部分：position: static static定位是HTML元素的默认值，即没有定位，元素...
在CSS中关于定位的内容是:position:relative | absolute | static | fixed。static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。在本文中，任何一个元素都被文本流所限制了自身的位置，但是...
position: relative; position: absolute; position: fixed; } 在https://developer.mozilla.org/zh-CN/docs/Web/CSS/position还说了下面这三个值： /* 全局值 */ position: inherit; position: initial; position:...
在CSS中关于定位的内容是：position:relative | absolute | static | fixed static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。relative 不脱离文档流，参考自身静态位置通过 top,bottom,...
用法：position：static(默认) | fixed | relative | absolute static 遵守正常的文档流，不设置top,bottom,left,right值。 fixed 脱离正常的文档流，完全以浏览器窗口为参照物，不随鼠标的滚动而滚动。设定...
CSS的很多其他属性大多容易理解，比如字体，文本，背景等。有些CSS书籍也会对这些简单的...relative absolute fixed static 下面分别讲述这四个属性 复制代码代码如下: ”parent”> ”sub1″>sub1</div> <div id
absolute绝对定位（相对于最近的父元素，假如父元素都是默认的static，那么将相对body进行定位，如果父元素为relative定位，那么就相对该父元素进行定位） relative相对定位（相对于自己，在原来位置上移动。与...
css中的position属性，position有四个值：absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设置一些不规则的布局，使用TLBR(top,left,bottom,right)来调整元素位置。 2.各个属性值的描述...