而相对定位就是相对于元素本来的位置再进行平移后获得新的位置,也就是说这个新位置是要根据原来的位置来定的,比如 left:10pxtop:-20px 就是把元素往右移动10像素,往上移动20像素。
打个比方,在地球上我们用经纬度来确定一个点的位置就是绝对定位,而类似“东南方向15公里”这样的就是相对定位了。
绝对定位(absolute)意思是:将被赋予此定位方法的对象从文档流中拖出,使用left,right,top, bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,即还是遵循HTML定位规则的。
相对定位(relative)意思:对象不可层叠,依据left,right,top,bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
绝对定位是相对于父标签决定位置,一般用于相对定位标签里面,JS特效经常用到。相对定位是相对于上一个相对定位的。一般用于浮动定位标签里面,一般跟绝对定位配合使用。
浮动定位才是常用的。
看例子:
<body>
<div
id="bq1"
style="
position:absolute
left:10px
top:10px
"></div>
<div
id="bq2"
style="
position:relative"></div>
<div
id="bq3"
style="
position:relative">
<div
id="bq4"
style="
position:absolute
left:10px
top:10px"></div>
</div>
</body>
以下只说id名代表div
绝对定位:position:absolute
如果bq1(绝对定位)外面没有div等父标签,bq1会以body为父标签。左边距距body
10像素,上边距距body
10像素。
如果bq4(绝对定位)在bq3(相对定位)里面,左边距距bq3
10像素,上边距距bq3
10像素。
相对定位:position:relative
bq2(相对定位)总是相对于前面的同级标签为基准标签(bq1)。
bq3以bq2为基准标签。