css中absolute和relative的区别
只知道absolute是相对父元素（非标准流元素），无占位
那relative相对什么点位，是不是a元素（relative）包含b元素（absolute），b是跟着a动？
哪相反呢！a是absolut…… 展开
1、文档流不同
elative 不脱离文档流，absolute 脱离文档流。
2、分级不同
elative 参考自身静态位置通过 top(上),bottom（下）,left（左）,right（右） 定位，并且可以通过z-index进行层次分级。
absolute通过 top,bottom,left,right 定位。选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。
3、定位不同
absolute是绝对定位，绝对定位就是相对于父元素的定位，不受父元素内其他子元素的影响；而relative是相对定位，相对定位是相对于同级元素的定位，也就是上一个同级元素。
扩展资料
由于广告的滥用，使得一些浏览器软件都开始有了广告内容拦截，使得一些很好的效果现在都不推荐使用了。比如让一个元素可能随着网页的滚动而不断改变自己的位置。
而现在我可以通过CSS中的一个定位属性来实现这样的一个效果，这个元素属性就是曾经不被支持的position:fixed。
含义：固定定位。这个固定与绝对定位很像，唯一不同的是绝对定位是被固定在网页中的某一个位置，而固定定位则是固定在浏览器的视框位置。
虽然原来的浏览器并不支持过个属性，但是浏览器的发展使得现在的高级浏览器都可以正确的解析这个CSS属性。并且通过CSS HACK来让IE6都可以实现这样的效果（目前无法使IE5.x）实现这种效果。
CSS元素绝对定位、相对定位 布局和浮动等
1、position:static|无定位
position:static是所有元素定位的默认值, 一般不用注明，除非有需要取消继承的别的定位
example:
#div-1 {
position:static;
}
2、 position:relative|相对定位
使用position:relative，就需要top,bottom,left,right4个属性来配合，确定元素的位置。
如果要让div-1层向下移动20px,左移40px:
example:
#div-1 {
position:relative;
top:20px;
left:40px;
}
如果用到相对定位，紧随他的层divafter是不会出现在div-1的下方，而是和div-1在同一个高度出现。
可见， position:relative;并不是很好用。
参考资料来源：百度百科-CSS定位
1、文档流不同
elative 不脱离文档流，absolute 脱离文档流。
2、分级不同
elative 参考自身静态位置通过 top(上),bottom（下）,left（左）,right（右） 定位，并且可以通过z-index进行层次分级。
absolute通过 top,bottom,left,right 定位。选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。
3、定位不同
absolute是绝对定位，绝对定位就是相对于父元素的定位，不受父元素内其他子元素的影响；而relative是相对定位，相对定位是相对于同级元素的定位，也就是上一个同级元素。
扩展资料
CSS定位的应用及注意事项
1、 A：相对定位（position: relative）：如果对某一个元素进行相对定位，它将出现在它所在的位置上。
然后，可以通过设置垂直（或水平)位置（top,right,bottom,left四值），让这个元素"相对于"它的起点进行移动。注：设置为相对定位的元素框会偏移某个距离。
元素仍然保持其未定位前的形状，它原本所占的空间仍保留；
2、 B：绝对定位(position: absolute)：绝对定位使元素的位置与文档流无关，所以不会占用空间。与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
注：设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框；
CSS定位的原理：可以位移的元素 （相对定位）
但是事实上那并非是真实的位移，因为，那只是通过加大margin值来实现的障眼法。而真正意义上的位移是通过top,right,bottom,left（下称TRBL，TRBL可以折分使用。）针对一个相对定位的元素所产生的。
我们看到这个处在文本流的区块被上面的相对定位挡住了一部分，这说明：“当元素被设置相对定位或是绝对定位后，将自动产生层叠，他们的层叠级别自然的高于文本流”。除非设置其z-index值为负值，但是在 Firefox等浏览器中z-index为负值时将不会显示。
并且我们发现当相对定位元素进行位移后，表现内容已经脱离了文本流，只是在本文流中还为原来的相对对定位留下了原有的总宽与总高（内容的高度或是宽度加上margin\border\padding的数值）。
这说明在相对定位中，虽然表现区脱离了原来的文本流，但是在文本流中还有此相对定位的老窝。这点要特别注意，因为在实际应用中如果相对定位的位移数值过大，那么原有的区域就会形成一块空白。
参考资料来源：百度百科-CSS定位
解释：
绝对定位就是相对于父元素的定位，不受父元素内其他子元素的影响；
而相对定位是相对于同级元素的定位，也就是上一个同级元素
absolute是绝对定位，相对于浏览器的定位。
比如：position：absolute；left:10px;top:20px; 这个容器始终位于距离浏览器左10px,距离浏览器上20px的这个位置。
relative是相对定位，是相对于前面的容器定位的，不能用top left定位，应该用margin属性。
希望能帮到你。
你这样一说，absolute和fixed混在一起
你好，absolute和fixed是不一样的，fixed是固定位置，设置了top和left之后，浏览器滚动条拖动时元素是不会动的，就固定在那里了。你可以试试看。
