定位其实就是设置style里面的position,默认是static,也就是我们之前的例子得到的那种效果。还有比较重要的是relative和absolute。要仔细分析下。
relative是相对定位,我们可以先来看个例子:
<!DOCTYPE html> <head> <meta charset=utf-8 /> <title>重要的定位</title> <style> .box { width : 100px; height : 100px; background-color : pink; float : left; margin-right : 20px; } .relative { position : relative; top : 30px; left : 10px; } </style> </head> <body> <div class="box">div1</div> <div class="box relative">div2</div> <div class="box">div3</div> </body>check the result
这就是relative,第二个盒子设置了position为relative,就可以设置他的left和top属性,它对相对于它原来的位置进行偏移。但是要注意到,这对其他两个盒子的位置没有影响。我们再看看绝对定位,absolute:
<!DOCTYPE html> <head> <meta charset=utf-8 /> <title>重要的定位</title> <style> .box { width : 100px; height : 100px; background-color : pink; float : left; margin-right : 20px; } .absolute { position : absolute; top : 30px; left : 10px; } </style> </head> <body> <div class="box">div1</div> <div class="box absolute">div2</div> <div class="box">div3</div> </body>check the result
这个结果有没有看懂?绝对定位的时候,div2的left和top就不是相对于它原来的位置了,而是相对于body这个元素,同时,它原来的位置也不复存在,div3会紧接着排在div1后面。
很奇怪,为什么绝对定位会相对于body,其实他并不是相对于body,而是相对于离它最近的定位为非static的元素,举个例子:
<!DOCTYPE html> <head> <meta charset=utf-8 /> <title>重要的定位</title> <style> .bigbox { width : 300px; height : 300px; background-color : gray; float : left; margin : 50px; } .box { width : 100px; height : 100px; background-color : pink; float : left; margin-right : 20px; } .relative { position : relative; } .absolute { position : absolute; top : 30px; left : 10px; } </style> </head> <body> <div class="bigbox"> <div class="box">div1</div> <div class="box absolute">div2</div> <div class="box">div3</div> </div> <div class="bigbox relative"> <div class="box">div1</div> <div class="box absolute">div2</div> <div class="box">div3</div> </div> </body>check the result
这个例子可以很好地说明问题,第一个bigbox没有设置position,默认是static,里面的子元素div2不会相对它计算,会再往上找非static的父元素,找到body。而第二个bigbox设置了position为relative,所以里面的子元素div2就会相对于它来计算。
定位可以用来作点啥呢?只要开动大脑,很多东西都能做出来。
<!DOCTYPE html> <head> <meta charset=utf-8 /> <title>重要的定位</title> <style> .bigbox { width : 300px; height : 300px; } .bigsize { font-size : 40px; font-weight : bold; } .relative { position : relative; } .absolute { position : absolute; } .one { left : 0px; top : 0px; } .two { left : 1px; top : 1px; } .three { left : 2px; top : 2px; } .four { left : 3px; top : 3px; } .five { left : 4px; top : 4px; } </style> </head> <body> <div class="bigbox relative"> <span class="absolute bigsize one">重影字效果</span> <span class="absolute bigsize two">重影字效果</span> <span class="absolute bigsize three">重影字效果</span> <span class="absolute bigsize four">重影字效果</span> <span class="absolute bigsize five">重影字效果</span> </div> </body>check the result
将5个字的top和left分别偏移不同的像素,就构成了重影字效果。