我们都知道absolute是绝对定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么样的特性,可以做出什么样的效果呢?关于两者之间又有什么样的技巧呢?下面我们就来一一解读。
Absolute,CSS中的写法是:position:absolute; 他的意思是绝对定位,他是参照浏览器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由TRBL决定。
一般来讲,网页居中的话用Absolute就容易出错,因为网页一直是随着分辨率的大小自动适应的,而Absolute则会以浏览器的左上角为原始点,不会应为分辨率的变化而变化位置。很多人出错就在于这点上出错。而网页居左其特性与Relative很相似,但是还是有本质的区别的。
Relative,CSS中的写法是:position:relative; 他的意思是绝对相对定位,他是参照父级的原始点为原始点,无父级则以BODY的原始点为原始点,配合TRBL进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位。
有时我们还需要依靠z-index来设定容器的上下关系,数值越大越在最上面,数值范围是自然数。当然有一点要注意,父子关系是无法用z-index来设定上下关系的,一定是子级在上父级在下。
<div style="border: 10px solid black">
<input type="button" value="提交" style="position:relative;left:10px;top:10px" /><br />
<input type="button" value="取消" style="position:absolute;left:10px;top:10px" />
</div>
像这样的“提交”button 设置了相对位置,那他就是相对于div的位置来说的,当div位置变了 button的 位置也就变了。而第二个“取消”button是设置了绝对位置,也就是相对于浏览器窗口的左上角的位置,他不关div怎么变化。
<div style="border: 10px solid black;margin-left:100px;margin-top:100px">
<input type="button" value="提交" style="position:relative;left:10px;top:10px" /><br />
<input type="button" value="取消" style="position:absolute;left:10px;top:10px" />
</div>
通过这样的一个变化就可以看出来absolute和relative的区别了。
分享到:
相关推荐
关于CSS position属性值absolute,relative的解释.zip
NULL 博文链接:https://rainbow702.iteye.com/blog/1703317
Position属性有四个值:static、fixed、absolute和relative, 后面两个在布局中的定位里是经常用到的,顾名思义, absolute是指绝对定位,即将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对...
position属性的相关定义:static:无特殊定位,对象遵循正常文档流;relative:对象遵循正常文档流;absolute:对象脱离正常文档流fixed:对象脱离正常文档流,有兴趣的朋友可以参考下哈
今天在看CSS的时候遇到了position: absolute、relative的问题,一直比较迷糊,今天终于搞清楚了。
目前几乎所有主流的浏览器都支持position属性("inherit"除外,"inherit"不支持所有包括IE8和之前版本IE浏览器,IE9、IE10还没测试过),以下是w3school对...可以选取具有定位的父级对象(下文将说到relative与absol
CSS中主要难以理解的属性包括盒型结构,以及定位。正如positioniseverything,本文将主要讲述关于position的理解,力求让您看完本文后对position有着最全面的认识。 position的四个属性值: relative absolute ...
css的position里的relative和absolute的区别.docx
本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态。这节课主要讲讲relative(相对)以及absolute(绝对)。 如何学习DIV+CSS...
在CSS中关于定位的内容是:position:relative | absolute | static | fixed。static 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。在本文中,任何一个元素都被文本流所限制了自身的位置,但是...
其中,CSS position 属性可以取5种值:position: absoluteposition: relativeposition: fixedposition: staticposition: inheritstatic 是 position 默认的属性值。任何应用了 position:static 的元素都处于常规文档...
引用 static : 无特殊定位,对象遵循HTML定位规则 absolute : 将对象从文档流..."对于页面中一个static的div#demo,我想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地方,应该是用这个position:relative
在CSS中关于定位的内容是:position:relative | absolute | static | fixed。static 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。在本文中,任何一个元素都被文本流所限制了自身的位置,但是...
CSS-position(定位)中的static、relative、fixed、absolute、sticky以及重叠的简单应用
position属性共有四种不同的定位方法,分别是static、fixed、relative、absolute。最后将会介绍和position属性密切相关的z-index属性。 第一部分:position: static static定位是HTML元素的默认值,即没有定位,元素...
但是涉及到弹出层、浮层、页面广告插件等等,都需要CSS中的position属性来定位了,对于初学者来说经常分不清楚是应该用position属性的absolute值、relative值、fixed值等等,下面我们就position属性基本的这三个值的...
在html中,当一个div想要定位时,我们第一反应是position属性,而position属性除了默认值外,还有absolute,relative和fixed。当被设置成fixed时,可以通过设置left、right、top、bottom的值来相对于body定位。 代码...
第三部分:relative定位 第四部分:absolute定位 第五部分:重叠的元素--z-index属性 第六部分:脱离档流导致的问题
position定位里的absolute,relative和fixed absolue:绝对定位,用top,bottom,left和right根据有定位的父级元素进行定位,如果无则相对body元素即整个页面文档进行定位。 relative:相对定位,相对自己原来的位置...